Flutter优雅单选按钮组插件elegant_radio_button_group的使用

Flutter优雅单选按钮组插件elegant_radio_button_group的使用

elegant_radio_button_group 是一个用于 Flutter 的优雅单选按钮组插件。它提供了流畅的动画效果，使您的应用界面更加美观。

特性

以下是一些该插件的特性展示：

使用方法

以下是如何在 Flutter 应用中使用 elegant_radio_button_group 插件的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Elegant Radio button group pacakge expample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late int? selectedValue;

  [@override](/user/override)
  void initState() {
    super.initState();
    selectedValue = 1;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ListTile(
              leading: ElegantRadioButton<int>(
                groupValue: selectedValue,
                value: 1,
                onChanged: (value) {
                  setState(() {
                    selectedValue = value;
                  });
                },
                fillColor: MaterialStateProperty.all(Colors.red),
              ),
              title: const Text('单选按钮 1'),
            ),
            ListTile(
              leading: ElegantRadioButton<int>(
                groupValue: selectedValue,
                value: 2,
                onChanged: (value) {
                  setState(() {
                    selectedValue = value;
                  });
                },
                fillColor: MaterialStateProperty.all(const Color(0xFFFF9494)),
              ),
              title: const Text('单选按钮 2'),
            ),
            ListTile(
              leading: ElegantRadioButton<int>(
                groupValue: selectedValue,
                value: 3,
                onChanged: (value) {
                  setState(() {
                    selectedValue = value;
                  });
                },
                fillColor: MaterialStateProperty.all(const Color(0xFFFFDCDC)),
              ),
              title: const Text('单选按钮 3'),
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 导入库：

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

2. 定义主应用：

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

3. 创建MaterialApp：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Elegant Radio button group pacakge expample',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(),
       );
     }
   }
   

4. 创建主页状态：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key}) : super(key: key);
   
     [@override](/user/override)
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 初始化状态并设置初始值：

   class _MyHomePageState extends State<MyHomePage> {
     late int? selectedValue;
   
     [@override](/user/override)
     void initState() {
       super.initState();
       selectedValue = 1;
     }
   

6. 构建UI：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       body: SafeArea(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             ListTile(
               leading: ElegantRadioButton<int>(
                 groupValue: selectedValue,
                 value: 1,
                 onChanged: (value) {
                   setState(() {
                     selectedValue = value;
                   });
                 },
                 fillColor: MaterialStateProperty.all(Colors.red),
               ),
               title: const Text('单选按钮 1'),
             ),
             // 其他单选按钮...
           ],
         ),
       ),
     );
   }