如何在 Flutter 中更新 showmodalsheet 中的小部件颜色？

Question

I'm new to flutter I want my widget border color to change on pressed I try it using setState() but it won't affect at all is there some other function to use in order to change my widget color in flutter? if so can someone show me an example of how to use it? Thank You hope someone will help

showModalBottomSheet( backgroundColor: Color(0xff086375), context: context,

    isScrollControlled: true,
    builder: (BuildContext context){
      return Container(
          padding: const EdgeInsets.symmetric(horizontal: 18),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(
                height: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          "PHP ",
                          style:
                              TextStyle(color: Colors.white, fontSize: 20),
                        ),
                        Container(
                          width: 40,
                          child: TextField(
                            cursorColor: Colors.white,
                            cursorWidth: 2,
                            keyboardType: TextInputType.number,
                            style: TextStyle(color: Colors.white),
                            decoration: InputDecoration.collapsed(
                                hintText: '0.00',
                                hintStyle: TextStyle(
                                    color: Colors.white70, fontSize: 20)),
                            autofocus: true,
                          ),
                        ),
                      ],
                    ),
                    Container(
                      child: Text(
                        "PAYMENT FOR " + selectedExpense,
                        style: TextStyle(color: Colors.white70),
                      ),
                    ),
                    Container(
                      color: Color(0xff086375),
                      height: 40,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Container(
                            child: IconButton(
                              icon: Icon(FontAwesomeIcons.utensils),
                              color: Colors.orange,
                              onPressed: () {
                                setState(() {
                                  selectedExpense = "FOOD";
                                  isFoodseleted = true;
                                  isTransportationseletced = false;
                                  isGroceriesselected = false;
                                  isAccomodationselected = false;
                                  isDrinksselected = false;
                                  isOhterselected = false;
                                });
                              },
                            ),
                            width: 50,
                            height: 40,
                            decoration: BoxDecoration(
                              border: Border(
                                  bottom: BorderSide(
                                      width: 5,
                                      color: isFoodseleted
                                          ? Colors.white
                                          : Color(0xff086375))),
                            ),
                          ),
                          Container(
                            child: IconButton(
                              icon: Icon(FontAwesomeIcons.bus),
                              color: Colors.yellow,
                              onPressed: () {
                                setState(() {
                                  selectedExpense = "TRANSPORTATION";
                                  isFoodseleted = false;
                                  isTransportationseletced = true;
                                  isGroceriesselected = false;
                                  isAccomodationselected = false;
                                  isDrinksselected = false;
                                  isOhterselected = false;
                                });
                              },
                            ),
                            width: 50,
                            height: 40,
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        width: 5,
                                        color: isTransportationseletced
                                            ? Colors.white
                                            : Color(0xff086375)))),
                          ),
                          Container(
                            child: IconButton(
                              icon: Icon(FontAwesomeIcons.shoppingCart),
                              color: Colors.lightBlue,
                              onPressed: () {
                                setState(() {
                                  selectedExpense = "GROCERIES";
                                  isFoodseleted = false;
                                  isTransportationseletced = false;
                                  isGroceriesselected = true;
                                  isAccomodationselected = false;
                                  isDrinksselected = false;
                                  isOhterselected = false;
                                });
                              },
                            ),
                            width: 50,
                            height: 40,
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        width: 5,
                                        color: isGroceriesselected
                                            ? Colors.white
                                            : Color(0xff086375)))),
                          ),
                          Container(
                            child: IconButton(
                              icon: Icon(FontAwesomeIcons.bed),
                              color: Colors.green,
                              onPressed: () {
                                setState(() {
                                  selectedExpense = "ACCOMODATION";
                                  isFoodseleted = false;
                                  isTransportationseletced = false;
                                  isGroceriesselected = false;
                                  isAccomodationselected = true;
                                  isDrinksselected = false;
                                  isOhterselected = false;
                                });
                              },
                            ),
                            width: 50,
                            height: 40,
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        width: 5,
                                        color: isAccomodationselected
                                            ? Colors.white
                                            : Color(0xff086375)))),
                          ),
                          Container(
                            child: IconButton(
                              icon: Icon(FontAwesomeIcons.glassMartini),
                              color: Colors.red,
                              onPressed: () {
                                setState(() {
                                  selectedExpense = "DRINKS";
                                  isFoodseleted = false;
                                  isTransportationseletced = false;
                                  isGroceriesselected = false;
                                  isAccomodationselected = false;
                                  isDrinksselected = true;
                                  isOhterselected = false;
                                });
                              },
                            ),
                            width: 50,
                            height: 40,
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        width: 5,
                                        color: isDrinksselected
                                            ? Colors.white
                                            : Color(0xff086375)))),
                          ),
                          Container(
                            child: IconButton(
                              icon: Icon(FontAwesomeIcons.plusCircle),
                              color: Colors.amber,
                              onPressed: () {
                                setState(() {
                                  selectedExpense = "OTHERS";
                                  isFoodseleted = false;
                                  isTransportationseletced = false;
                                  isGroceriesselected = false;
                                  isAccomodationselected = false;
                                  isDrinksselected = false;
                                  isOhterselected = true;
                                });
                              },
                            ),
                            width: 50,
                            height: 40,
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        width: 5,
                                        color: isOhterselected
                                            ? Colors.white
                                            : Color(0xff086375)))),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(height: 10),
            ],
          ),
        );

    }




    )

Answer 1

Just change all your IconButtonMethods as follow,

IconButton(
                              icon: Icon(FontAwesomeIcons.glassMartini),
                              color: isDrinksselected
                                            ? Colors.white
                                            : Color(0xff086375),
                              onPressed: () {
                              // statements
                              }
)

You are adding your color change condition to root container.

I think you want to change the color of the icon on the press event.

So, your ternary operator ("?:") condition for color change should be for your IconButton color instead of container.

Just add it on all the IconButton color property and you're good to go.

Answer 2

Here is an example that you can refer:

ValueNotifier<Color> is used to dispatch change and ValueListenableBuilder<Color> is used to consume change.

Run code on DartPad

Refer following code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(home: MyApp()),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: bottomSheetContent,
          );
        },
      ),
    );
  }
}

Widget bottomSheetContent(BuildContext context) {
  final List<Color> _colors = <Color>[
    Colors.redAccent,
    Colors.blueAccent,
    Colors.greenAccent,
    Colors.orangeAccent,
  ];
  final ValueNotifier<Color> _colorNotifier = ValueNotifier(_colors.first);
  return ValueListenableBuilder(
    valueListenable: _colorNotifier,
    builder: (BuildContext context, Color value, Widget child) {
      return Container(
        height: 300,
        color: value,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Card(
                child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: widgets(value),
            )),
            colors(_colors, _colorNotifier),
          ],
        ),
      );
    },
  );
}

Row widgets(Color color) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Text(
        'Text',
        style: TextStyle(color: color),
      ),
      FloatingActionButton(
        backgroundColor: color,
        onPressed: () {},
        child: Icon(Icons.add),
      ), 
      Switch(onChanged: (bool value) {}, value: true, activeColor: color,)
    ],
  );
}

Row colors(List<Color> _colors, ValueNotifier<Color> _colorNotifier) {
  return Row(
    children: _colors
        .map((color) => Expanded(
              child: InkWell(
                  onTap: () {
                    _colorNotifier.value = color;
                  },
                  child: Container(
                    decoration:
                        BoxDecoration(border: Border.all(), color: color),
                    height: 100,
                  )),
            ))
        .toList(),
  );
}

Answer 3

maybe you can apply this to your solution:

Color color = new Color(0xffb74093);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: color,
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 200,
          child: Column(
            children: <Widget>[
              FlatButton(
                color: Colors.blue,
                onPressed: (){
                  setColor(Colors.blue);

                }
              ),

              FlatButton(
                color: Colors.red,
                onPressed: (){
                  setColor(Colors.red);
                }
              ),
            ],
          ),
        ),
      ),
    );
  }


  Color setColor(Color newColor){
    setState(() {
      color = newColor;
    });
  }