Flutter中Material Segmented Control默认无选中状态实现问题

Material Segmented Control组件本身设计默认会选中一个选项，直接设置selectionIndex = null或-1无法实现无选中效果，因为组件内部会强制将索引约束在有效范围内。可以通过自定义样式模拟无选中状态来解决，具体实现如下：

实现步骤 #

1. 声明可空的选中索引变量，初始值设为null表示无选中状态
2. 传递给组件的selectionIndex用默认值兜底（比如_selectedIndex ?? 0），然后通过样式控制让所有项在无选中时呈现未选中外观
3. 处理点击事件，支持切换选中/取消选中状态

代码示例 #

int? _selectedIndex;

@override
Widget build(BuildContext context) {
  return MaterialSegmentedControl(
    children: const {
      0: Text('选项1'),
      1: Text('选项2'),
      2: Text('选项3'),
    },
    // 兜底一个有效索引，避免组件报错
    selectionIndex: _selectedIndex ?? 0,
    // 自定义选中样式：无选中时和未选中样式一致
    selectedStyle: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(
        _selectedIndex == null ? Colors.transparent : Colors.blue,
      ),
      foregroundColor: MaterialStateProperty.all(
        _selectedIndex == null ? Colors.black : Colors.white,
      ),
    ),
    unselectedStyle: const ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.transparent),
      foregroundColor: MaterialStateProperty.all(Colors.black),
    ),
    // 无选中时隐藏指示器
    indicatorStyle: IndicatorStyle(
      color: _selectedIndex == null ? Colors.transparent : Colors.blue,
    ),
    onSegmentTapped: (index) {
      setState(() {
        // 点击已选中的项则取消选中，否则设置为选中
        _selectedIndex = _selectedIndex == index ? null : index;
      });
    },
  );
}

原理说明 #

通过动态切换选中样式、未选中样式和指示器的外观，让组件在_selectedIndex为null时，所有选项都呈现未选中的视觉效果，从而模拟出“无默认选中”的状态。这种方式无需修改组件源码，兼容性更好。

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