Flutter ToggleButton始终使用默认颜色问题求助

使用Flutter的ToggleButtons组件时，按钮位置和交互正常，但始终只显示默认颜色（选中时蓝色背景，未选中无背景），无法应用自定义样式。尝试将列表定义为List<List<bool>>和List<List<Widget>>后，initState、setState、isSelected及children相关代码报错。

1. 样式属性缺失：仅设置selectedBorderColor和disabledBorderColor不足以覆盖默认样式，ToggleButtons的选中背景色、未选中内容/边框颜色需要显式配置才能生效。
2. initState冗余循环：循环内重复生成selectedUser和selectedChildren，最终仅保留最后一次循环结果，完全没必要，直接生成一次即可。
3. 选中逻辑可能不符合需求：当前onPressed是切换单个按钮状态的多选逻辑，但初始化默认第一个按钮选中，若需求是单选，会出现多按钮同时选中的情况。

1. 补充完整样式属性 #

给ToggleButtons添加fillColor（选中背景色）、selectedColor（选中内容颜色）、color（未选中内容颜色）、borderColor（未选中边框色）等属性，覆盖默认样式。

2. 简化initState逻辑 #

移除冗余的for循环，直接根据数据长度生成一次selectedUser和selectedChildren。

3. 调整选中逻辑（按需选择） #

• 单选：点击按钮时将所有选中状态设为false，仅当前按钮设为true。
• 多选：保留原切换单个状态的逻辑。

import 'package:calendar_vertical/provider/toggle_provider.dart';
import 'package:calendar_vertical/provider/user_model.dart';
import 'package:calendar_vertical/widgets/user_item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ToggleButtonUsers extends StatefulWidget {
  @override
  _ToggleButtonUsersState createState() => _ToggleButtonUsersState();
}

class _ToggleButtonUsersState extends State<ToggleButtonUsers> {
  bool vertical = false;
  List<bool> selectedUser = [];
  List<Widget> selectedChildren = [];

  @override
  void initState() {
    super.initState();
    final userModelData = Provider.of<UserModel>(context, listen: false);
    final userModel = userModelData.items;
    final toggleModelData = Provider.of<ToggleProvider>(context, listen: false);
    final toggleModel = toggleModelData.items;

    // 直接生成选中状态列表，默认第一个选中
    selectedUser = List.generate(
      toggleModel.length,
      (index) => index == 0 ? true : false,
    );

    // 生成按钮子组件列表
    selectedChildren = List.generate(
      toggleModel.length,
      (index) => UserItem(
        userModel[index].id,
        userModel[index].name,
        userModel[index].image,
        userModel[index].color,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ToggleButtons(
        constraints: const BoxConstraints(
          minHeight: 40.0,
          maxHeight: 45,
          minWidth: 80.0,
          maxWidth: 85,
        ),
        // 补充自定义样式属性
        fillColor: Colors.green[100], // 选中时背景色
        selectedColor: Colors.green, // 选中时内容颜色
        color: Colors.grey, // 未选中时内容颜色
        borderColor: Colors.grey, // 未选中时边框色
        selectedBorderColor: Colors.green, // 选中时边框色
        disabledBorderColor: Colors.red,
        direction: vertical ? Axis.vertical : Axis.horizontal,
        onPressed: (int index) {
          setState(() {
            // 单选逻辑：仅当前按钮选中
            for (var i = 0; i < selectedUser.length; i++) {
              selectedUser[i] = i == index;
            }
            // 多选逻辑：注释上面循环，启用下面一行
            // selectedUser[index] = !selectedUser[index];
          });
          debugPrint('selected User ist nun: ' + selectedChildren.toString());
        },
        children: selectedChildren,
        isSelected: selectedUser,
      ),
    );
  }
}

关键修改说明 #

• 将super.initState()移到initState开头，符合Flutter生命周期规范，避免潜在上下文异常。
• 补充完整样式属性，确保自定义样式覆盖默认效果。
• 移除冗余循环，优化初始化逻辑。
• 提供单选/多选两种逻辑的可选方案，按需切换。

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