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

Question

我是 flutter 的新手我希望我的小部件边框颜色在按下时改变我尝试使用 setState() 但它根本不会影响是否有其他功能可以用来改变我的小部件颜色在颤动？如果可以，有人可以告诉我如何使用它的示例吗？谢谢你希望有人能帮助

showModalBottomSheet( 背景颜色：颜色（0xff086375），上下文：上下文，

    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

也许您可以将此应用到您的解决方案中：

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;
    });
  }

Answer 2

只需如下更改所有 IconButtonMethods，

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

您正在将颜色更改条件添加到根容器。

我想你想更改新闻事件中图标的颜色。

因此，您的三元运算符（“?:”）颜色更改条件应该针对您的 IconButton 颜色而不是容器。

只需将它添加到所有 IconButton 颜色上属性就可以了。

Answer 3

这里有一个例子，您可以参考：

ValueNotifier<Color>用于分派零钱，ValueListenableBuilder<Color>用于消费零钱。

Run code on DartPad

参考以下代码：

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(),
  );
}

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

How to update the widget color in showmodalsheet in Flutter?

android

flutter

flutter-test

flutter-layout