Flutter自定义复选框插件custom_check_box的使用

custom_check_box 是一个自定义的复选框小部件，支持自定义活动和非活动颜色、图标、圆角半径和边框颜色。以下是该插件的使用示例。

截图

开始使用

这个项目是Dart包的起点，可以轻松在多个Flutter或Dart项目中共享代码库。有关开始使用Flutter的帮助，请查看我们的在线文档，它提供了教程、样本、移动开发指南和完整的API参考。

示例代码

以下是一个完整的示例demo，展示如何使用 custom_check_box 插件：

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool shouldCheck = false;
  bool shouldCheckDefault = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: Colors.grey.withOpacity(0.2),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Check Box (By Dipak Shrestha)',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Customized Check Box',
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.0,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.normal,
              ),
            ),
            CustomCheckBox(
              value: shouldCheck,
              shouldShowBorder: true,
              borderColor: Colors.red,
              checkedFillColor: Colors.red,
              borderRadius: 8,
              borderWidth: 1,
              checkBoxSize: 22,
              onChanged: (val) {
                setState(() {
                  shouldCheck = val;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Default Check Box',
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.0,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.normal,
              ),
            ),
            CustomCheckBox(
              value: shouldCheckDefault,
              splashColor: Colors.red.withOpacity(0.4),
              tooltip: 'Custom Check Box',
              splashRadius: 40,
              onChanged: (val) {
                setState(() {
                  shouldCheckDefault = val;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键属性解释

• value: 复选框当前的状态（true/false）。
• shouldShowBorder: 是否显示边框。
• borderColor: 边框的颜色。
• checkedFillColor: 选中时填充的颜色。
• borderRadius: 圆角半径。
• borderWidth: 边框宽度。
• checkBoxSize: 复选框的大小。
• onChanged: 状态改变时的回调函数。
• splashColor: 水波纹颜色。
• tooltip: 提示文本。
• splashRadius: 水波纹的半径。

通过上述代码和属性设置，您可以创建一个具有高度定制化的复选框组件，满足不同的UI需求。希望这个示例对您有所帮助！