Flutter单选按钮组件插件matertino_radio的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter单选按钮组件插件matertino_radio的使用

Matertino Radio

完全可自定义的单选按钮组包，由 1 More Code 开发。

pub package publisher

开发

一个美丽且简单的自定义单选按钮组小部件，适用于 Flutter。它可以完全自定义标签、标题、标签样式、标题样式、单选图标等。它还包含单个单选列表项。您可以使用此库与带有搜索功能的现代下拉菜单结合使用。

Demo 截图

图片1 图片2 图片3
图片1 图片2 图片3

如何使用

如何使用 MatertinoRadio

  1. 在您的 pubspec.yaml 文件中添加 matertino_radio：
dependencies:
  matertino_radio: ^1.0.5
  1. 导入 matertino_radio 包：
import 'package:matertino_radio/matertino_radio.dart';

如何使用 MatertinoBottomSheetRadio 属性

  1. 创建列表和选定项变量：
List<String> items = [
  "Adventure", "Agility", "Cultural Influence", "Entrepreneurship", "Heritage",
  "Movers", "Open for Business", "Power", "Quality of Life", "Social Purpose"
];

String? selectedItem;
  1. 创建 MatertinoBottomSheetRadio：
MatertinoBottomSheetRadio(
  list: items,
  selected: selectedItem,
  onSelect: (val) {
    setState(() {
      selectedItem = val;
    });
  },
  child: CupertinoTextField(
    onTap: null,
    controller: TextEditingController(text: selectedItem),
    placeholder: "Select Item",
    enabled: false,
    suffix: const Icon(Icons.arrow_drop_down),
  )
)
  1. 输出效果：

输出效果

如何使用 MatertinoRadio 水平自定义单选按钮组

  1. 创建列表和选定项变量：
List<Map<String, dynamic>> lists = [
  {"title": "Male", "iconData": Icons.male_rounded},
  {"title": "Female", "iconData": Icons.female_rounded},
  {"title": "Other", "iconData": Icons.alt_route_rounded}
];

String? selectedItem;
  1. 使用 MatertinoRadioListTile：
Row(
  children: List.generate(
    lists.length, 
    (index) => Expanded(
      child: MatertinoRadioListTile(
        value: lists[index]['title'],
        groupValue: selectedItem,
        title: lists[index]['title'],
        onChanged: (val) {
          setState(() {
            selectedItem = val!;
          });
        }
      )
    )
  )
)
  1. 输出效果：

输出效果

如何使用 MatertinoRadio 列表与自定义单选按钮组

  1. 创建列表和选定项变量：
List<Map<String, dynamic>> lists = [
  {"title": "India", "rank": "#1", "color": Colors.cyan.withOpacity(0.3)},
  {"title": "Germany", "rank": "#2", "color": Colors.green.withOpacity(0.3)},
  {"title": "Canada", "rank": "#3", "color": Colors.blue.withOpacity(0.3)},
  {"title": "United States", "rank": "#4", "color": Colors.redAccent.withOpacity(0.3)},
  {"title": "Switzerland", "rank": "#5", "color": Colors.amber.withOpacity(0.3)},
  {"title": "China", "rank": "#6", "color": Colors.teal.withOpacity(0.3)}
];

String? selectedItem;
  1. 使用 MatertinoRadioListTile：
Column(
  children: List.generate(
    lists.length,
    (index) => MatertinoRadioListTile(
      value: lists[index]['title'],
      groupValue: selectedItem,
      title: lists[index]['title'],
      tileColor: lists[index]['color'],
      trailingWidget: Text(lists[index]['rank']),
      selectedRadioIconData: CupertinoIcons.checkmark_seal_fill,
      unselectedRadioIconData: CupertinoIcons.checkmark_seal,
      onChanged: (val) {
        setState(() {
          selectedItem = val!;
        });
      }
    )
  )
)
  1. 输出效果：

输出效果

示例用法

更多详细信息请参阅 示例代码。

问题与反馈

如果您想发送反馈或报告错误，请提交 issue。如果您有疑问或建议，请 开启讨论。感谢您的支持！

贡献

欢迎所有拉取请求 🤝。

支持

如果此包节省了您的时间，您可以买我一杯咖啡！

扫描下方二维码或点击链接，并不要忘记留下消息：

Buy Me A Coffee


更多关于Flutter单选按钮组件插件matertino_radio的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter单选按钮组件插件matertino_radio的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用material_radio（实际上在Flutter标准库中已经包含了Radio按钮组件，因此这里假设你是指使用Flutter自带的Radio组件）的示例代码。

使用Flutter内置的Radio组件

Flutter的Radio组件通常与RadioListTile一起使用，后者提供了一个更加用户友好的界面。下面是一个简单的示例，展示了如何使用RadioListTile来创建一个单选按钮组。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Radio Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedValue = 0; // 初始选择值

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio Button Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Radio(
                value: 0,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
              ),
              title: Text('Option 1'),
            ),
            ListTile(
              leading: Radio(
                value: 1,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
              ),
              title: Text('Option 2'),
            ),
            ListTile(
              leading: Radio(
                value: 2,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
              ),
              title: Text('Option 3'),
            ),
            SizedBox(height: 20),
            Text('Selected Value: $_selectedValue'),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. MyApp 类：

    • 定义了应用的主入口，设置了主题并指定了MyHomePage作为首页。

  2. MyHomePage 类：

    • 这是一个有状态的组件，用于存储当前选中的单选按钮值。

  3. _MyHomePageState 类：

    • 包含UI逻辑，使用Radio组件创建单选按钮，并将它们包裹在ListTile中以提供更好的布局。
    • Radio组件的value属性用于标识每个按钮，groupValue属性用于标识当前选中的按钮值，onChanged回调函数用于处理按钮点击事件。
    • 当按钮被点击时，setState方法会更新UI以反映新的选择。

  4. 显示选中的值：

    • 使用Text组件显示当前选中的单选按钮值。

注意：

  • 在实际项目中，你可能会希望将单选按钮封装在一个更复杂的组件中，或者与表单字段等其他组件结合使用。
  • 如果你确实在寻找一个名为material_radio的第三方插件，通常Flutter社区提供的插件都会有详细的文档和示例代码，你可以参考该插件的README文件或官方文档来获取更多信息。不过，大多数情况下，Flutter标准库中的组件已经足够满足需求。
回到顶部