是否存在适配图示选择栏的Flutter widget组件？

适配组件说明 #

你要找的这类分段式互斥选择组件，Flutter官方已经内置了现成实现，不需要自行开发：

• 3.10及以上版本的Flutter，可以直接使用SegmentedButton组件，天然支持选项相连、互斥选中的逻辑，样式可高度自定义，完全匹配你截图里的ESPN选择栏需求。
• 如果使用3.10以下的旧版本Flutter，可以用官方自带的ToggleButtons组件，也能实现完全一致的效果。

基础使用示例 #

// 定义选项枚举
enum EspnTab { scores, fixtures, standings }

class EspnTabDemo extends StatefulWidget {
  const EspnTabDemo({super.key});

  @override
  State<EspnTabDemo> createState() => _EspnTabDemoState();
}

class _EspnTabDemoState extends State<EspnTabDemo> {
  EspnTab selectedTab = EspnTab.scores;

  @override
  Widget build(BuildContext context) {
    return SegmentedButton<EspnTab>(
      segments: const [
        ButtonSegment(
          value: EspnTab.scores,
          label: Text('Scores'),
        ),
        ButtonSegment(
          value: EspnTab.fixtures,
          label: Text('Fixtures'),
        ),
        ButtonSegment(
          value: EspnTab.standings,
          label: Text('Standings'),
        ),
      ],
      selected: {selectedTab},
      onSelectionChanged: (newSelection) {
        setState(() {
          selectedTab = newSelection.first;
          // 在这里补充选中后切换页面内容的逻辑即可
        });
      },
      // 可选：自定义样式匹配设计需求
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith((states) {
          return states.contains(MaterialState.selected) ? Colors.red : Colors.white;
        }),
        foregroundColor: MaterialStateProperty.resolveWith((states) {
          return states.contains(MaterialState.selected) ? Colors.white : Colors.black;
        }),
        side: MaterialStateProperty.all(const BorderSide(color: Colors.red)),
      ),
    );
  }
}

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