Flutter圆角复选框插件flutter_check_box_rounded的使用

flutter_check_box_rounded 是一个用于创建功能齐全且可自定义的圆角复选框的Flutter插件。本文将介绍如何安装和使用该插件，并提供完整的示例代码。

安装

首先，在您的 pubspec.yaml 文件中添加对 flutter_check_box_rounded 的依赖：

dependencies:
  flutter_check_box_rounded: any # 或者最新版本

然后运行 flutter pub get 来获取并安装该插件。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用 CheckBoxRounded 组件。

主要文件：lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_check_box_rounded/flutter_check_box_rounded.dart';

const _verticalSpacing = SizedBox(height: 20);

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Check Box Rounded Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const CheckBoxView(),
    );
  }
}

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

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

class _CheckBoxViewState extends State<CheckBoxView> {
  bool? _isChecked;

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

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Theme.of(context).scaffoldBackgroundColor,
      statusBarIconBrightness: Brightness.dark,
    ));

    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 基本用法
            CheckBoxRounded(
              onTap: (bool? value) {},
            ),
            _verticalSpacing,

            // 自定义未选中图标
            CheckBoxRounded(
              onTap: (bool? value) {},
              uncheckedWidget: const Icon(Icons.close, size: 20),
              animationDuration: const Duration(milliseconds: 50),
            ),
            _verticalSpacing,

            // 自定义选中和未选中图标及动画时间
            CheckBoxRounded(
              onTap: (bool? value) {},
              animationDuration: const Duration(seconds: 1),
              uncheckedWidget: const Icon(Icons.mood_bad, size: 20),
              checkedWidget: const Icon(
                Icons.mood,
                color: Colors.white,
                size: 20,
              ),
            ),
            _verticalSpacing,

            // 输出选中状态到控制台
            CheckBoxRounded(
              isChecked: true,
              uncheckedWidget: const Icon(Icons.close, size: 20),
              onTap: (bool? value) => debugPrint(value.toString()),
            ),
            _verticalSpacing,

            // 自定义大小和颜色
            CheckBoxRounded(
              onTap: (bool? value) {},
              uncheckedColor: Colors.red,
              uncheckedWidget: const Icon(
                Icons.close_rounded,
                color: Colors.white,
                size: 55 / 1.2,
              ),
              size: 55,
            ),
            _verticalSpacing,

            // 更改大小和颜色
            CheckBoxRounded(
              onTap: (bool? value) {},
              uncheckedColor: Colors.yellow,
              size: 77,
            ),
            _verticalSpacing,

            // 动态改变选中状态
            CheckBoxRounded(
              size: 88,
              isChecked: _isChecked,
              onTap: (bool? value) {
                setState(() {
                  _isChecked = value;
                });
              },
            ),
            _verticalSpacing,
          ],
        ),
      ),
    );
  }
}