ToggleButtons组件图标颜色异常问题求助

我在AppBar的actions区域添加了ToggleButtons组件，当前显示效果如下：

如图所示，图标颜色存在异常：选中状态的图标颜色与AppBar背景色一致，未选中的图标显示为黑色；但AppBar中ToggleButtons组件之外的其他IconButton图标显示为白色，这和预期不符。

相关代码 #

Flutter 核心代码 #

import 'package:flutter/material.dart';

void main() async {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Project',
      home: Scaffold(
          appBar: AppBar(
              title: Text("Game Manager"),
              actions: [
                Row(children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ToggleButtons(
                        borderRadius: const BorderRadius.all(Radius.circular(8)),
                        /*borderColor: Colors.blue,
                        selectedBorderColor: Colors.blue[200],
                        selectedColor: Colors.white,
                        fillColor: Colors.blue[300],
                        color: Colors.blue[300],*/
                        onPressed: (int i) => print("pressed!"),
                        isSelected: const [true,false,false],
                        children: [
                          Tooltip(message: "sort_by_name", child: const Icon(Icons.receipt)),
                          Tooltip(message: "sort_by_status", child: const Icon(Icons.stars)),
                          Tooltip(message: "sort_by_size", child: const Icon(Icons.storage))
                        ]),
                  ),
                  IconButton(
                    onPressed: () {
                      print("Yeah");
                    },
                    icon: const Icon(Icons.unfold_less),
                    tooltip: "fold_all",
                  ),
                  IconButton(
                    onPressed: null,
                    icon: Icon(Icons.refresh),
                    tooltip: "refresh",
                  ),
                ])
              ]),
          body: Container()
      ),
    );
  }
}

pubspec.yaml 配置 #

name: project
description: A new Flutter project.

# 防止包被意外发布到pub.dev
publish_to: 'none'

# 应用版本与构建号
version: 1.0.0+1

environment:
  sdk: '>=2.18.4 <3.0.0'

dependencies:
  flutter:
    sdk: flutter
  # iOS风格图标库
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  # 代码规范检查工具
  flutter_lints: ^2.0.0

flutter:
  # 启用Material图标库
  uses-material-design: true
  # 资源文件配置
  assets:
  - assets/images/logo.png
  - assets/translations/

解决方案 #

问题根源是ToggleButtons默认不继承AppBar的主题样式，导致颜色配置与AppBar内置组件不匹配。以下两种方案可修复：

方案1：手动指定颜色参数 #

取消ToggleButtons中被注释的颜色配置，调整参数适配AppBar的主题风格：

ToggleButtons(
  borderRadius: const BorderRadius.all(Radius.circular(8)),
  borderColor: Colors.white,
  selectedBorderColor: Colors.white,
  selectedColor: Colors.white, // 选中时图标颜色
  fillColor: Colors.white.withOpacity(0.2), // 选中时背景色，与AppBar交互效果匹配
  color: Colors.white.withOpacity(0.7), // 未选中时图标颜色
  onPressed: (int i) => print("pressed!"),
  isSelected: const [true,false,false],
  children: [
    Tooltip(message: "sort_by_name", child: const Icon(Icons.receipt)),
    Tooltip(message: "sort_by_status", child: const Icon(Icons.stars)),
    Tooltip(message: "sort_by_size", child: const Icon(Icons.storage))
  ],
)

方案2：通过Theme组件继承AppBar主题 #

用Theme包裹ToggleButtons，让它自动适配AppBar的主题样式，避免手动配置每个颜色参数：

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Theme(
    data: Theme.of(context).copyWith(
      toggleButtonsTheme: ToggleButtonsThemeData(
        color: Colors.white.withOpacity(0.7),
        selectedColor: Colors.white,
        fillColor: Colors.white.withOpacity(0.2),
        borderColor: Colors.white,
        selectedBorderColor: Colors.white,
      ),
    ),
    child: ToggleButtons(
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      onPressed: (int i) => print("pressed!"),
      isSelected: const [true,false,false],
      children: [
        Tooltip(message: "sort_by_name", child: const Icon(Icons.receipt)),
        Tooltip(message: "sort_by_status", child: const Icon(Icons.stars)),
        Tooltip(message: "sort_by_size", child: const Icon(Icons.storage))
      ],
    ),
  ),
)

两种方案都能让ToggleButtons的图标颜色与AppBar中的其他IconButton保持一致：选中时图标为纯白色，未选中时为半透明白色，选中背景色也符合AppBar的交互设计规范。

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