如何在Flutter 3.13.6中将SegmentedButton的BorderRadius设为0？

在Flutter 3.13.6稳定版中，SegmentedButton默认带有圆角，要将其圆角设为0，只需通过style参数配置样式即可。

修改后的完整代码 #

SegmentedButton<int>(
  segments: const <ButtonSegment<int>>[
    ButtonSegment<int>(
      value: 0,
      label: Text('item1'),
    ),
    ButtonSegment<int>(
      value: 1,
      label: Text('item2'),
    ),
  ],
  selected: <int>{_selectedIndex},
  onSelectionChanged: (value) {
    setState(() {
      _selectedIndex = value.first;
    });
  },
  showSelectedIcon: false,
  // 配置样式去除圆角
  style: SegmentedButton.styleFrom(
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
    ),
    // 可选：统一边框样式，避免按钮间缝隙
    side: const BorderSide(color: Colors.grey),
  ),
)

说明 #

• 使用SegmentedButton.styleFrom()统一设置按钮样式，通过shape传入RoundedRectangleBorder并指定borderRadius: BorderRadius.zero，即可完全移除圆角。
• 若需要自定义边框颜色或宽度，可添加side参数，确保按钮组的视觉连贯性。

当前Flutter版本信息 #

$ flutter --version
Flutter 3.13.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ead455963c (4周前) • 2023-09-26 18:28:17 -0700
Engine • revision a794cf2681
Tools • Dart 3.1.3 • DevTools 2.25.0

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