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

msh_checkbox

msh_checkbox 是一个受iOS平台上的BEMCheckbox启发而设计的、可自定义圆形复选框，当被选中或取消选中时会播放动画。下图展示了不同样式的复选框示例：

Features

• 动画样式：提供4种动画/视觉风格（stroke, scale in checkmark, scale in background, fade in）。
• 颜色定制：可以为激活态、未激活态和禁用态设置不同的颜色。
• 动画时长：能够自定义动画持续时间。

Getting Started

要开始使用这个包，你需要先安装它：

flutter pub add msh_checkbox

接下来，你可以在你的Dart文件中导入该库，并按照下面的例子来创建一个带有自定义复选框的应用程序。

示例代码

这是一个完整的示例demo，展示了如何在Flutter应用中使用msh_checkbox插件：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;
  bool isDisabled = false;
  MSHCheckboxStyle style = MSHCheckboxStyle.stroke;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MSHCheckbox Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('MSHCheckbox Example')),
        body: Column(
          children: [
            Expanded(
              child: Center(
                child: MSHCheckbox(
                  size: 100,
                  value: isChecked,
                  isDisabled: isDisabled,
                  colorConfig: MSHColorConfig.fromCheckedUncheckedDisabled(
                    checkedColor: Colors.blue,
                  ),
                  style: style,
                  onChanged: (selected) {
                    setState(() {
                      isChecked = selected;
                    });
                  },
                ),
              ),
            ),
            Container(
              height: 150,
              color: Colors.blue,
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    control(
                      "Disabled",
                      Switch(
                        value: isDisabled,
                        activeColor: Colors.white,
                        onChanged: (value) => setState(() {
                          isDisabled = value;
                        }),
                      ),
                    ),
                    control(
                      "Style",
                      Padding(
                        padding: const EdgeInsets.only(top: 8.0),
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 8.0),
                            child: DropdownButton<MSHCheckboxStyle>(
                              isDense: true,
                              iconEnabledColor: Colors.grey,
                              dropdownColor: Colors.white,
                              underline: Container(),
                              items: MSHCheckboxStyle.values
                                  .map(
                                    (style) => DropdownMenuItem(
                                      value: style,
                                      child: Text(
                                        style.name(),
                                      ),
                                    ),
                                  )
                                  .toList(),
                              value: style,
                              onChanged: (style) => setState(() {
                                if (style != null) {
                                  this.style = style;
                                }
                              }),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget control(String title, Widget control) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Colors.white,
          ),
        ),
        control,
      ],
    );
  }
}

extension _StyleName on MSHCheckboxStyle {
  String name() {
    switch (this) {
      case MSHCheckboxStyle.stroke:
        return "Stroke";
      case MSHCheckboxStyle.fillScaleColor:
        return "Scale Color";
      case MSHCheckboxStyle.fillScaleCheck:
        return "Scale Check";
      case MSHCheckboxStyle.fillFade:
        return "Fade";
    }
  }
}

通过这段代码，你可以看到我们不仅实现了基本的复选框功能，还添加了两个控制选项用于切换是否禁用复选框以及选择不同的动画样式。希望这能帮助你更好地理解和使用msh_checkbox插件！

如果你有任何问题或者需要进一步的帮助，请随时提问。同时，如果你觉得这个小部件对你有帮助，也可以考虑支持作者的工作。 😊