Flutter中如何实现图标动态切换的FloatingActionButton？

你的思路完全没问题——FloatingActionButton本身支持动态更新内容，只要通过setState()触发UI重建，根据状态变量切换图标即可。现有代码有两个细节需要修正：

• 布尔变量未初始化：isConditionTrue初始为null，第一次点击会触发空值错误，需要给它一个明确的初始值（比如false）。
• 图标不符合需求：你需要的是❌图标，当前代码用了Icons.add，替换成Icons.close即可。

修正后的完整代码：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化状态变量为false
  bool isConditionTrue = false; 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Action Button Demo'),
      ),
      body: const Center(
        child: Text(
          'Your App Content',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            // 切换状态
            isConditionTrue = !isConditionTrue;
          });
        },
        // 根据状态切换图标：true显示✔️，false显示❌
        child: Icon(
          isConditionTrue ? Icons.check : Icons.close,
        ),
      ),
    );
  }
}

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

如果想用emoji直接作为图标（而非Material Icons），可以把Icon替换成Text组件：

child: Text(
  isConditionTrue ? '✔️' : '❌',
  style: const TextStyle(fontSize: 24),
),

内容的提问来源于stack exchange，提问作者陳奕斌