Flutter中如何实现点击选中式选择选项？是否有可用第三方包

是否有可用的包来实现这种点击即可选中的选择选项？

我曾尝试展示自定义按钮列表来实现该功能。

根据不同技术栈，这里提供几种实用方案：

Web前端 #

• React项目：可以用react-select，它支持自定义选项渲染，能轻松把选项改成按钮样式，点击即可完成选中，还支持单选/多选、搜索等扩展功能。
• Bootstrap项目：bootstrap-select适配Bootstrap生态，自带按钮式选择样式，点击选项就能切换选中状态，配置简单。
• 原生JS（无依赖）：不想引入第三方包的话，直接用原生JS就能实现，示例代码：

  // 获取所有选项按钮
  const optionButtons = document.querySelectorAll('.select-option-btn');
  
  // 绑定点击事件
  optionButtons.forEach(button => {
    button.addEventListener('click', () => {
      // 移除所有按钮的选中状态
      optionButtons.forEach(btn => btn.classList.remove('selected'));
      // 标记当前按钮为选中
      button.classList.add('selected');
      // 处理选中值，比如存入变量或提交表单
      console.log('选中内容:', button.textContent);
    });
  });
  

  配合CSS样式：

  .select-option-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 6px;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.2s;
  }
  
  .select-option-btn.selected {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
  }
  

移动端 #

• Flutter：用原生的ToggleButtons组件，无需额外包就能实现多按钮点击选中效果，还能自定义按钮的大小、颜色等样式；复杂分段选择可使用flutter_segment包。
• Android：原生MaterialButtonToggleGroup组件直接支持点击选中的按钮组，适配Material Design风格，支持单选/多选模式。
• iOS：使用UISegmentedControl原生组件，自带点击切换选中功能；也可自定义UIButton组，通过点击事件切换选中状态实现自定义样式选择器。

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