Flutter Segmented Button选中图标修改与移除方法咨询

要移除SegmentedButton选中项默认的勾选图标，有两种简单可行的方式：

方法一：逐个设置ButtonSegment的icon #

给每个ButtonSegment添加icon: const SizedBox.shrink()，就能覆盖默认的选中图标：

SegmentedButton<int>(
      segments: [
        ButtonSegment(
          value: 0,
          label: const Text('Asked'),
          icon: const SizedBox.shrink(), // 移除选中图标
        ),
        ButtonSegment(
          value: 1,
          label: const Text('Answered'),
          icon: const SizedBox.shrink(), // 移除选中图标
        ),
      ],
      selected: {appProvider.indexLoginSegmentedButton},
      onSelectionChanged: (newSelection) {
        appProvider.changeIndexLoginSegmentedButton(newSelection.first);
      },
      style: ButtonStyle(
        shape: WidgetStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4.0),
            side: const BorderSide(color: Colors.transparent),
          ),
        ),
        overlayColor: WidgetStateProperty.resolveWith<Color>(
              (Set<WidgetState> states) {
            if (states.contains(WidgetState.selected)) {
              return kShrineAppBarPurple.withOpacity(0.08);
            }
            return Colors.transparent;
          },
        ),
        side: WidgetStateProperty.resolveWith<BorderSide>(
              (Set<WidgetState> states) {
            if (states.contains(WidgetState.selected)) {
              return BorderSide(color: kShrineAppBarPurple, width: 2.0);
            }
            return const BorderSide(color: Colors.transparent, width: 0.0);
          },
        ),
        foregroundColor: WidgetStateProperty.resolveWith<Color>(
              (Set<WidgetState> states) {
            if (states.contains(WidgetState.selected)) {
              return kShrineAppBarPurple;
            }
            return Colors.black;
          },
        ),
      ),
    )

方法二：全局统一设置选中图标 #

通过ButtonStyle的selectedIcon属性一次性控制所有segment的选中图标，无需逐个修改：

SegmentedButton<int>(
      segments: [
        ButtonSegment(
          value: 0,
          label: const Text('Asked'),
        ),
        ButtonSegment(
          value: 1,
          label: const Text('Answered'),
        ),
      ],
      selected: {appProvider.indexLoginSegmentedButton},
      onSelectionChanged: (newSelection) {
        appProvider.changeIndexLoginSegmentedButton(newSelection.first);
      },
      style: ButtonStyle(
        selectedIcon: WidgetStateProperty.all(const SizedBox.shrink()), // 全局移除选中图标
        shape: WidgetStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4.0),
            side: const BorderSide(color: Colors.transparent),
          ),
        ),
        overlayColor: WidgetStateProperty.resolveWith<Color>(
              (Set<WidgetState> states) {
            if (states.contains(WidgetState.selected)) {
              return kShrineAppBarPurple.withOpacity(0.08);
            }
            return Colors.transparent;
          },
        ),
        side: WidgetStateProperty.resolveWith<BorderSide>(
              (Set<WidgetState> states) {
            if (states.contains(WidgetState.selected)) {
              return BorderSide(color: kShrineAppBarPurple, width: 2.0);
            }
            return const BorderSide(color: Colors.transparent, width: 0.0);
          },
        ),
        foregroundColor: WidgetStateProperty.resolveWith<Color>(
              (Set<WidgetState> states) {
            if (states.contains(WidgetState.selected)) {
              return kShrineAppBarPurple;
            }
            return Colors.black;
          },
        ),
      ),
    )

如果想替换成自定义图标，只需要把SizedBox.shrink()换成你需要的Icon组件即可，比如：

// 单个segment替换图标
ButtonSegment(
  value: 0,
  label: const Text('Asked'),
  icon: const Icon(Icons.check_circle, color: Colors.purple),
)

// 全局替换图标
selectedIcon: WidgetStateProperty.all(const Icon(Icons.check_circle, color: Colors.purple)),

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