Flutter自定义单选按钮插件crea_radio_button的使用

Flutter自定义单选按钮插件CreaRadioButton的使用

简介

CreaRadioButton 是一个用于创建简单单选按钮组的Flutter插件。它允许你轻松地创建具有不同样式和功能的单选按钮，支持水平或垂直布局、方形或圆形按钮，并且可以自定义选中状态下的样式。

功能

• 支持任意数量的按钮
• 支持水平或垂直布局
• 支持方形或圆形按钮
• 可以更改选中状态下的边框和背景颜色
• 支持取消选中功能

限制

目前该插件仅支持 String 类型的值和按钮标签。选项通过 RadioOption 类传递给 RadioButtonGroup。

开始使用

要使用此插件，首先需要在 pubspec.yaml 文件中添加 crea_radio_button 作为依赖项。

dependencies:
  crea_radio_button: ^latest_version

RadioButtonGroup 示例

基本用法

以下是一个简单的 RadioButtonGroup 示例，展示了如何创建一个带有四个选项的单选按钮组：

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('CreaRadioButton Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FrequencyContainer(),
            SizedBox(height: 20),
            AmountContainer(),
          ],
        ),
      ),
    ),
  ));
}

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

  [@override](/user/override)
  _FrequencyContainerState createState() => _FrequencyContainerState();
}

class _FrequencyContainerState extends State<FrequencyContainer> {
  String label = "";

  List<RadioOption> options = [
    RadioOption("MONTHLY", "Monthly"),
    RadioOption("YEARLY", "Yearly")
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      width: 400,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.grey.shade200),
        color: Colors.grey.shade50,
      ),
      child: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          children: [
            const Text(
              "How do you want to pay?",
              style: TextStyle(fontSize: 30),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                label,
                style: const TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Colors.pink,
                ),
              ),
            ),
            const SizedBox(height: 25),
            RadioButtonGroup(
              options: options,
              textStyle: const TextStyle(fontSize: 15, color: Colors.white),
              mainAxisAlignment: MainAxisAlignment.center,
              selectedColor: Colors.grey.shade400,
              mainColor: Colors.grey.shade400,
              selectedBorderSide: BorderSide(width: 2, color: Colors.pink.shade300),
              buttonWidth: 120,
              buttonHeight: 35,
              callback: (RadioOption val) {
                setState(() {
                  label = val.label;
                });
                print(val);
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  _AmountContainerState createState() => _AmountContainerState();
}

class _AmountContainerState extends State<AmountContainer> {
  final int defaultOptionIndex = 3;
  late RadioOption selectedOption;

  List<RadioOption> options = [
    RadioOption("10.0", "10"),
    RadioOption("25.0", "25"),
    RadioOption("50.0", "50"),
    RadioOption("100.0", "100")
  ];

  [@override](/user/override)
  void initState() {
    super.initState();
    selectedOption = options[defaultOptionIndex]; // 设置默认选项
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 400,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.grey.shade200),
        color: Colors.grey.shade200,
      ),
      child: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          children: [
            const Text("Select your amount"),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                '\$ ${selectedOption.value}',
                style: TextStyle(fontSize: 20, color: Colors.pinkAccent.shade200),
              ),
            ),
            const SizedBox(height: 25),
            RadioButtonGroup(
              buttonHeight: 35,
              buttonWidth: 60,
              circular: true,
              mainColor: Colors.grey,
              selectedColor: Colors.pink.shade400,
              preSelectedIdx: defaultOptionIndex,
              options: options,
              callback: (RadioOption val) {
                setState(() {
                  selectedOption = val;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}