Flutter 小部件可快速创建一组按钮✈️

您多久会在应用程序中看到一次按钮🧐？

我想你在生活中见过的每个应用程序。
按钮都是不同的。

就像这样	或者像这样	或者如果你的设计师还停留在过去

但所有这些按钮通常为了某些目的而被组合在一起。

对于多选表单	选择性别

对于过滤器	另一个选择

还有很多其他案例...

以及如何在 Flutter 中制作类似的小部件？

Flutter 有一个基础的 Radio 小部件，用于从所有项目中选择一个。
它非常容易使用。
你需要指定该元素的值以及整个组的当前选中值。



Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      ListTile(
        title: Text("Male"),
        leading: Radio(
          value: 1,
          groupValue: val,
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
          activeColor: Colors.green,
        ),
      ),
      ListTile(
        title: Text("Female"),
        leading: Radio(
          value: 2,
          groupValue: val,
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
          activeColor: Colors.green,
        ),
      ),
    ],
  )

对于多项选择，我们有一个复选框。
但一切并非如此简单，仍然需要组织多个复选框的工作。



Checkbox(
  value: false,
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
)

如果我不想花费大量时间发布具有逻辑的类似小部件怎么办？

或者也许我想让小部件自定义，而不是默认的 Radio 或 Checkbox？

这就是我写这篇文章的原因，
我创建了一个库，以便在最短的时间内创建选择按钮。

例如 - 看看如何在 5 行中制作一组时间选择按钮



GroupButton(
    isRadio: false,
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40", "22:00", "23:30"],
)

结果如下：

那么，如果我想使用默认复选框怎么办？

这将非常简单

首先，我们将按钮放入变量中并创建一个控制器
之后，我们将添加一个 buttonBuilder 来构建任何最有趣的按钮 UI
就这样 ...



final _controller = GroupButtonController();

final _buttons = ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40", "22:00", "23:30"];

GroupButton(
  isRadio: false,
  controller: _controller,
  onSelected: (index, isSelected) =>
    print('$index button is selected'),
  buttons: _buttons,
  buttonBuilder: (selected, i, context) => CheckBoxTile(
    title: _buttons[i],
    selected: selected,
    onTap: () => _controller.toggleIndexes([i]),
  ),
),

结果如下：

我可以告诉你更多关于这个包的信息，但我认为它的存储库会代替我告诉你一切。

软件包链接

GroupButton
在 Github 上用⭐️星号支持这个项目。这并不难，但非常棒。

源代码

您可以在此处找到此包的完整示例

文章来源：https://dev.to/frezyx/flutter-widget-to-create-a-group-of-buttons-fast-3fo7