Flutter - 如何更改放置在自定义小部件中的 Color 类的值？

Question

I'd like to create a widget that I'll use it a lot of times, so I don't have to create it manully.

here's what I've built:

    Widget keyWidget(String keyNumber, String keyName) {
          return Container(
              width: 100.0,
              height: 50.0,
              color: Colors.red, //How I change the color's value? (Colors.{this_one})?
              child: FlatButton(
                onPressed: () {
                  final player = AudioCache();
                  player.play('key$keyNumber.mp3');
                },
                child: Text('$keyName'),
              ),
            );
}

How do I change the color's value ( color: Colors.{this_one}, ) so I could set it in the keyWidget properties?

Answer 1

You can pass your Color as argument in your keyWidget() method

Try this way

 Widget keyWidget(String keyNumber, String keyName,Color mColor) {
          return Container(
              width: 100.0,
              height: 50.0,
              color: mColor, //How I change the color's value? (Colors.{this_one})?
              child: FlatButton(
                onPressed: () {
                  final player = AudioCache();
                  player.play('key$keyNumber.mp3');
                },
                child: Text('$keyName'),
              ),
            );
}

Now you can call this method like this.

keyWidget('keyNumber','keyName',Colors.red);
keyWidget('keyNumber','keyName',Colors.pink);
keyWidget('keyNumber','keyName',Color(0xffACACAC));

You can also make Color parameter optional

SAMPLE CODE

Widget keyWidget(String keyNumber, String keyName,{ mColor=Colors.red}) {
    return Container(
      width: 100.0,
      height: 50.0,
      color: mColor, //How I change the color's value? (Colors.{this_one})?
      child: FlatButton(
        onPressed: () {
          final player = AudioCache();
          player.play('key$keyNumber.mp3');
        },
        child: Text('$keyName'),
      ),
    );
  }

Now you can call this method like this.

keyWidget('keyNumber', 'keyName');
keyWidget('keyNumber', 'keyName',mColor:  Colors.accents);