Flutter实现点击切换图片：布尔值false显图A、true显图B

代码存在的核心问题 #

• 状态交互逻辑完全失效：原onTap回调里仅实例化了一个未被渲染的Switch控件，没有触发任何状态更新；自定义的_onSwitchChanged方法硬编码将状态固定为false，根本无法实现点击翻转状态的效果
• 存在大量无效冗余代码：closedImage、openImage两个声明的变量全程没有参与任何逻辑判断，属于无意义声明
• 图片映射关系完全错位：原三元判断的分支逻辑与需求相反，且使用本地资源路径与给定的网络图需求不匹配
• 交互反馈缺失：InkWell未配置点击触发的涟漪效果，用户点击时无明确视觉感知

修正后的可运行代码 #

class _MyAppState extends State<MyApp> {
  // 单状态变量即可，初始值为false，默认展示图A
  bool showImageB = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
        ),
        body: Center(
          child: InkWell(
            // 点击直接翻转状态
            onTap: () {
              setState(() {
                showImageB = !showImageB;
              });
            },
            child: Container(
              color: Colors.white,
              child: ClipRRect(
                // 状态严格按照需求映射：false=图A，true=图B
                child: showImageB
                    ? Image.network('https://i.sstatic.net/qjHSt.png')
                    : Image.network('https://i.sstatic.net/oEUBA.png'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

补充说明 #

• 若需要使用本地资源加载图片，只需将Image.network替换为Image.asset，确保分支对应的图片文件与需求映射关系一致：状态为false时加载图A对应的本地文件，状态为true时加载图B对应的本地文件
• 原代码中的ClipRRect未指定圆角参数，实际不会产生任何裁剪效果，可按需添加borderRadius: BorderRadius.circular(8)实现自定义圆角展示

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