Flutter单选按钮组插件simple_radio

Flutter 单选按钮组插件 `simple_radio_group` 的使用

simple_radio_group 是一个简单易用的 Flutter 插件，支持表单验证和控制器。

使用

以下是一个简单的示例，展示了如何在 Flutter 应用程序中使用 simple_radio_group 插件。该插件允许你创建水平或垂直方向的单选按钮组，并且可以设置初始值、验证器等属性。

import 'package:flutter/material.dart';
import 'package:simple_radio_group/simple_radio_group.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SimpleRadioGroupExample(),
    );
  }
}

class SimpleRadioGroupExample extends StatelessWidget {
  const SimpleRadioGroupExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Simple radio group example"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text("水平方向"),
            SimpleRadioGroup<String>(
              direction: Axis.horizontal, // 设置为水平方向
              initialValue: "Option 1", // 设置初始值
              validator: (String? option) { // 验证器函数
                if (option == null) {
                  return "请选择一个选项"; // 如果未选择任何选项，则返回错误信息
                }
                return null; // 如果选择了选项，则返回 null
              },
              options: const [ // 可供选择的选项列表
                "Option 1",
                "Option 2",
                "Options 3",
              ],
            ),
            const SizedBox(
              height: 22,
            ),
            const Text("垂直方向"),
            SimpleRadioGroup<String>( // 创建垂直方向的单选按钮组
              direction: Axis.vertical, // 设置为垂直方向
              validator: (String? option) { // 验证器函数
                if (option == null) {
                  return "请选择一个选项"; // 如果未选择任何选项，则返回错误信息
                }
                return null; // 如果选择了选项，则返回 null
              },
              options: const [ // 可供选择的选项列表
                "Option 1",
                "Option 2",
                "Options 3",
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

h691938207 1楼•1 个月前

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

simple_radio_group 是一个用于在 Flutter 中创建单选按钮组的简单而有效的插件。它允许你轻松地创建一组单选按钮，并在用户选择某个选项时获取所选值。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 simple_radio_group 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_radio_group: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用 `simple_radio_group`

以下是一个简单的示例，展示了如何使用 simple_radio_group 插件来创建一个单选按钮组，并获取用户选择的值。

import 'package:flutter/material.dart';
import 'package:simple_radio_group/simple_radio_group.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadioGroupExample(),
    );
  }
}

class RadioGroupExample extends StatefulWidget {
  @override
  _RadioGroupExampleState createState() => _RadioGroupExampleState();
}

class _RadioGroupExampleState extends State<RadioGroupExample> {
  String? selectedValue;

  final List<String> options = ["Option 1", "Option 2", "Option 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Radio Group Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SimpleRadioGroup(
              options: options,
              onSelected: (value) {
                setState(() {
                  selectedValue = value;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Selected Value: $selectedValue',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

导入插件：

import 'package:simple_radio_group/simple_radio_group.dart';

定义选项：

final List<String> options = ["Option 1", "Option 2", "Option 3"];

创建单选按钮组：
```
SimpleRadioGroup(
  options: options,
  onSelected: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)
```
- options: 单选按钮组的选项列表。
- onSelected: 当用户选择一个选项时触发的回调函数，value 是用户选择的选项。

显示选中的值：

Text(
  'Selected Value: $selectedValue',
  style: TextStyle(fontSize: 18),
)

自定义样式

SimpleRadioGroup 提供了一些属性来自定义单选按钮的样式，例如：

activeColor: 选中时的颜色。
textStyle: 选项文本的样式。
direction: 单选按钮的排列方向（Axis.horizontal 或 Axis.vertical）。

例如：

SimpleRadioGroup(
  options: options,
  onSelected: (value) {
    setState(() {
      selectedValue = value;
    });
  },
  activeColor: Colors.blue,
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
  direction: Axis.vertical,
)

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