如何使用Floating Action Button修改Icon图标颜色

实现步骤 #

• 在StatefulWidget的State类中定义存储图标颜色的变量，设置好初始值
• 将需要修改颜色的图标的color属性和该变量绑定
• 给红色FloatingActionButton添加onPressed点击事件，调用setState更新颜色变量为红色，即可触发UI刷新完成图标颜色切换

可运行示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 存储图标颜色的变量，初始设为黑色
  Color _iconColor = Colors.black;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('图标颜色切换示例')),
        body: Center(
          // 要修改颜色的目标图标，color属性绑定变量
          child: Icon(Icons.colorize, size: 100, color: _iconColor),
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton.extended(
              icon: const Icon(Icons.colorize),
              label: const Text('Red'),
              backgroundColor: Colors.red,
              // 新增点击回调修改颜色
              onPressed: () {
                setState(() {
                  _iconColor = Colors.red;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

补充说明 #

如果需要切换的图标和触发点击的FloatingActionButton不在同一个State组件内，可以使用Provider、Riverpod等状态管理方案共享颜色变量实现跨组件更新。

内容的提问来源于stack exchange，提问作者user17419714