Flutter动画单选按钮插件animated_radio

Flutter动画单选按钮插件animated_radio_buttons的使用

插件介绍

animated_radio_buttons 是一个用于Flutter的单选按钮包。这个小部件可以帮助你快速在你的Flutter应用中添加一组动画单选按钮。

插件页面

animated_radio_buttons

简单使用方法

创建一个基本的 `RadioButtons Group`

以下是一个基本的 AnimatedRadioButtons 使用示例：

int myVar;

AnimatedRadioButtons(
    backgroundColor: Colors.yellow[400], // 背景颜色
    value: myVar, // 当前选中的值
    layoutAxis: Axis.horizontal, // 按钮布局方向
    buttonRadius: 40.0, // 按钮圆角半径
    items: [
        AnimatedRadioButtonItem(
            label: "Star Battles", // 按钮标签
            color: Colors.black, // 按钮颜色
            fillInColor: Colors.grey), // 填充颜色
        AnimatedRadioButtonItem(
            label: "Star Trek",
            labelTextStyle: TextStyle(color: Colors.blue), // 标签文本样式
            fillInColor: Colors.yellow[400]),
        AnimatedRadioButtonItem(
            label: "Losers",
            color: Colors.green,
            fillInColor: Colors.greenAccent)
    ],
    onChanged: (value) {
        setState(() {
            myVar = value; // 更新当前选中的值
        });
    },
);

以下是插件运行效果的GIF截图：

示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用 animated_radio_buttons 包：

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

void main() {
  runApp(
    MaterialApp(
      home: Home(),
    ),
  );
}

class Home extends StatefulWidget {
  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int? myVar = 1; // 初始选中值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow[400], // 背景颜色
      appBar: AppBar(), // 应用栏
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴对齐方式
        children: [
          AnimatedRadioButtons(
            backgroundColor: Colors.yellow[400],
            value: myVar ?? 0, // 如果myVar为null则默认选中第一个
            layoutAxis: Axis.horizontal, // 水平布局
            buttonRadius: 40.0, // 按钮圆角半径
            items: [
              AnimatedRadioButtonItem(
                  label: "Star Battles",
                  color: Colors.black,
                  fillInColor: Colors.grey),
              AnimatedRadioButtonItem(
                  label: "Star Trek",
                  labelTextStyle: TextStyle(color: Colors.blue),
                  fillInColor: Colors.yellow[400]),
              AnimatedRadioButtonItem(
                  label: "Losers",
                  color: Colors.green,
                  fillInColor: Colors.greenAccent)
            ],
            onChanged: (value) {
              setState(() {
                myVar = value; // 更新选中值
              });
            },
          ),
          myVar == null
              ? Text(" Current selected index: *please select one* ")
              : Text(" Current selected index: $myVar"), // 显示当前选中索引
          ElevatedButton(
              onPressed: () {
                setState(() {
                  myVar = 2; // 设置选中最后一个按钮
                });
              },
              child: Text("Set value to last")),
        ],
      ),
    );
  }
}

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

yuanlaile 1楼•2 天前

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

当然，以下是如何在Flutter中使用animated_radio_buttons插件来实现动画单选按钮的一个示例代码。首先，你需要确保已经在pubspec.yaml文件中添加了animated_radio_buttons依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_radio_buttons: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在Dart文件中使用AnimatedRadioButtons组件。以下是一个完整的示例，展示如何在Flutter应用中实现动画单选按钮：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Radio Buttons Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Select an option:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 16),
            AnimatedRadioButtons<String>(
              options: ['Option 1', 'Option 2', 'Option 3'],
              selectedValue: selectedValue,
              onChanged: (String? value) {
                setState(() {
                  selectedValue = value;
                });
              },
              direction: Axis.horizontal,
              animationDuration: Duration(milliseconds: 300),
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              size: 24.0,
              groupValue: 0, // 如果选项是简单的整数索引，可以使用这个参数来替代options和selectedValue（这里为了演示options的用法，不实际使用这个参数）
            ),
            SizedBox(height: 24),
            Text(
              'Selected Value: $selectedValue',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

依赖导入：首先导入animated_radio_buttons包。
应用入口：创建一个MyApp类作为应用的入口。
主页面：创建一个MyHomePage类作为应用的主页面，它是一个有状态的组件，用于处理单选按钮的选中状态。
单选按钮：使用AnimatedRadioButtons组件来创建动画单选按钮。
- options：一个字符串列表，表示每个单选按钮的标签。
- selectedValue：当前选中的值。
- onChanged：当选中值改变时的回调函数，用于更新状态。
- direction：单选按钮的布局方向，可以是Axis.horizontal或Axis.vertical。
- animationDuration：动画持续时间。
- activeColor和inactiveColor：分别表示选中状态和未选中状态的颜色。
- size：单选按钮的大小。
- groupValue：用于直接设置和获取整数索引的选中值（这里为了展示options的用法，未实际使用这个参数）。

这个示例展示了如何使用animated_radio_buttons插件来创建具有动画效果的单选按钮，并根据用户的选择更新界面。希望这个示例对你有帮助！

Flutter动画单选按钮插件animated_radio_buttons的使用