flutterparameter-passingstatelesswidget

How to pass data to stateless widget calling from another stateless widget?


I am trying to pass some color info from one widget to another but I am not able to get that color in destination widget. I wanted to build a single class with some UI code in it and just call this class in my main widget so that I don't have to repeat the code all over again, but I am not able to pass the data, Here is the code that I am working on: What I am doing wrong?

void main(List<String> args) => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stateless/Clean Code'),
        ),
        body: const StatelessOne(),
      ),
    );
  }
}

class StatelessOne extends StatelessWidget {
  const StatelessOne({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          const Text(
              'Widget color can be customised without \nhaving to retype the entire code'),
          StatelessTwo(key: key, param: Colors.green),
          StatelessTwo(key: key, param: Colors.pink),
          StatelessTwo(key: key, param: Colors.blue),
          StatelessTwo(key: key, param: Colors.orange),
        ],
      ),
    );
  }
}

class StatelessTwo extends StatelessWidget {
  StatelessTwo({Key? key, @required param}) : super(key: key);

  final Map param = {};

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120,
      width: 250,
      color: param['color'],
      child: Center(child: Text('Your Repetitive Widget $key')),
    );
  }
}


Solution

  • Simple way will be

    
    class StatelessTwo extends StatelessWidget {
      final Color color;
    
      const StatelessTwo({
        Key? key,
        required this.color,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 120,
          width: 250,
          color: color,
          child: Center(
              child: Text('Your Repetitive Widget ${key ?? "no key found"}')),
        );
      }
    }
     -----
      color: color, //use
    
    

    Pass color StatelessTwo(key: key, color: Colors.green), and seems you are passing same key, avoid it is not necessary for Ui-logic. Most likely, you don't need to pass key, if you still want to pass use UinqueKey()