使用浮动操作按钮更改图标颜色答案

【问题标题】：Changes icon color by using Floating Action Button使用浮动操作按钮更改图标颜色
【发布时间】：2022-01-01 05:26:03
【问题描述】：

我想通过使用浮动操作按钮来更改图标颜色。如果我按下红色按钮，图标会变为红色。

代码：

floatingActionButton: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        FloatingActionButton.extended(
          icon: Icon(Icons.colorize),
          label: Text('Red'),
          backgroundColor: Colors.red,
        ),

【问题讨论】：

标签： flutter dart flutter-layout flutter-web floating-action-button

【解决方案1】：

你可以这样做（使用 StatefulWidget 小部件和 setState）：

class ChangeIconColor extends StatefulWidget {
  @override
  ChangeIconColorState createState() => ChangeIconColorState();
}

class ChangeIconColorState extends State<ChangeIconColor> {
  
  Color selectedColor = Colors.blue;
  
  changeColor(Color color){
    setState(() {
      selectedColor = color;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
        FloatingActionButton.extended(
          onPressed: () {
            changeColor(Colors.red);
          },
          icon: Icon(Icons.colorize),
          label: Text('Red'),
          backgroundColor: Colors.red,
        ),
      ]),
      body: Container(
          child: Icon(
        Icons.lock_clock,
        color: selectedColor,
      )),
    );
  }
}

如果你想使用 StatelessWidget，你可以像这样使用 ValueNotifier：

class ChangeIconColorState extends StatelessWidget {
  final ValueNotifier<Color> selectedColorNotifier = ValueNotifier(Colors.blue);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
        FloatingActionButton.extended(
          onPressed: () {
            selectedColorNotifier.value = Colors.red;
          },
          icon: Icon(Icons.colorize),
          label: Text('Red'),
          backgroundColor: Colors.red,
        ),
      ]),
      body: Container(
          child: ValueListenableBuilder(
        builder: (context, Color color, child) {
          return Icon(
            Icons.lock_clock,
            color: color,
          );
        },
        valueListenable: selectedColorNotifier,
      )),
    );
  }
}

【讨论】：

我在答案的第二部分编辑了我的答案以使用 StatelessWidget
如果在我的编码中已经有 body for boarder 和 'child : Icon (Icons.lock_clock, color: Colors.blue)'，我想如何插入 ValueListenableBuild ？

【解决方案2】：

所以你首先要确保你当前的小部件是StatefulWidget，如果你不知道那是什么或者如何知道你的小部件是否是一个有状态的小部件，你应该可能查看有关 Flutter 的初学者教程。

现在，您需要为图标的颜色声明一个变量，并将该颜色传递给图标：

Color iconColor = Colors.blue;
...
Icon(Icons.alarm, color: iconColor),
...

接下来，在您的浮动操作按钮的按下方法上：

onPressed; () => setState(() => iconColor = Colors.red)), // whatever color you want here

setState 部分很重要，因为它告诉 Flutter 使用新值重建小部件。

【讨论】：