1

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')),
    );
  }
}
Abdullah
  • 123
  • 1
  • 1
  • 11

1 Answers1

1

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()

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
  • `All final variables must be initialized, but 'color' isn't. Try adding an initializer for the field`, giving this error and if I add a default color, it will be shown on all of the Ui renders, not the colors I am passing – Abdullah Oct 31 '21 at 20:14
  • and putting `this` before color says this: `The parameter 'color' can't have a value of 'null' because of its type, but the implicit default value is 'null'. Try adding either an explicit non-'null' default value or the 'required' modifier` – Abdullah Oct 31 '21 at 20:16
  • a typo error `@required`, check update answer. – Md. Yeasin Sheikh Nov 01 '21 at 02:01
  • okay perfect, it's working.. thank you one thing the `Key? key` is an optional argument so it should be the last expected argument in constructor. – Abdullah Nov 06 '21 at 20:26