Flutter动画勾选标记插件animated_checkmark的使用

描述

animated_checkmark是一个Flutter插件，它提供了一种简单的方法来显示、动画化和设置复选标记的样式。你可以通过一个布尔值或双精度浮点数值来控制动画的检查/未检查/不确定状态，并且可以动画化颜色、粗细和大小。此外，你还可以选择绘制交叉线（对于假值）或者不绘制破折号（对于不确定值），并且可以选择线条是圆滑还是尖锐。

预览

更多演示

功能特性

• 通过布尔值或双精度浮点数值来动画化检查/未检查/不确定状态。
• 可以动画化颜色、粗细和大小。
• 支持圆滑或尖锐的线条样式。
• 可选择绘制交叉线用于假值。
• 可选择不绘制破折号用于不确定值。

使用方法

添加依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  animated_checkmark: ^latest_version # 请替换为最新版本号

然后执行flutter pub get来安装这个包。

示例代码

以下是一个完整的示例，展示了如何使用animated_checkmark创建一个可交互的复选标记界面。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Checkmark Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _size = 50;
  bool _checked = true;
  bool _indeterminate = false;
  bool _rounded = false;
  bool _drawCross = false;
  bool _drawDash = true;
  Color? _color;

  void setChecked(bool value) {
    setState(() {
      _checked = value;
      _indeterminate = false;
    });
  }

  void setIndeterminate() {
    setState(() => _indeterminate = true);
  }

  void setRounded(bool value) {
    setState(() => _rounded = value);
  }

  void setDrawCross(bool value) {
    setState(() => _drawCross = value);
  }

  void setDrawDash(bool value) {
    setState(() => _drawDash = value);
  }

  void setColor(Color color) {
    setState(() => _color = color);
  }

  void setSize(double size) {
    setState(() => _size = size);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ColoredBox(
                color: Colors.yellow.shade100,
                child: Checkmark(
                  duration: const Duration(milliseconds: 250),
                  curve: Curves.linear,
                  checked: _checked,
                  indeterminate: _indeterminate,
                  size: _size,
                  color: _color,
                  rounded: _rounded,
                  drawCross: _drawCross,
                  drawDash: _drawDash,
                ),
              ),
              const SizedBox(height: 20),
              SizedBox(
                width: 250,
                child: Slider(
                  value: _size,
                  max: 200,
                  min: 10,
                  label: _size.round().toString(),
                  onChanged: setSize,
                ),
              ),
              const SizedBox(height: 20),
              Wrap(
                spacing: 10,
                children: [
                  OutlinedButton(
                    onPressed: () => setChecked(true),
                    child: const Text('CHECK'),
                  ),
                  OutlinedButton(
                    onPressed: () => setChecked(false),
                    child: const Text('UNCHECK'),
                  ),
                  OutlinedButton(
                    onPressed: () => setIndeterminate(),
                    child: const Text('INDETERMINATE'),
                  ),
                ],
              ),
              const SizedBox(height: 10),
              Wrap(
                spacing: 10,
                children: [
                  OutlinedButton(
                    onPressed: () => setDrawCross(!_drawCross),
                    child: const Text('DRAW CROSS'),
                  ),
                  OutlinedButton(
                    onPressed: () => setDrawDash(!_drawDash),
                    child: const Text('DRAW DASH'),
                  ),
                ],
              ),
              const SizedBox(height: 10),
              Wrap(
                spacing: 10,
                children: [
                  OutlinedButton(
                    onPressed: () => setRounded(true),
                    child: const Text('ROUNDED'),
                  ),
                  OutlinedButton(
                    onPressed: () => setRounded(false),
                    child: const Text('SHARPEN'),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              Container(
                width: 200,
                alignment: Alignment.center,
                child: GridView.builder(
                  shrinkWrap: true,
                  itemCount: Colors.primaries.length,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    mainAxisSpacing: 2,
                    crossAxisSpacing: 2,
                    crossAxisCount: 6,
                  ),
                  itemBuilder: (_, i) {
                    final color = Colors.primaries[i];
                    return Card(
                      color: color,
                      clipBehavior: Clip.antiAlias,
                      child: InkWell(
                        onTap: () => setColor(color),
                        child: Checkmark(
                          weight: 4,
                          color: Colors.white70,
                          checked: _color == color,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含多个按钮和滑块的页面，用户可以通过点击按钮改变复选标记的状态（检查、未检查、不确定），调整其大小、是否绘制交叉线、是否绘制破折号、线条样式（圆滑或尖锐）以及颜色。

赞助

如果你觉得这个插件对你有帮助，欢迎赞助作者以支持他的工作：

• Buy Me A Coffee
• Ko-Fi

希望上述内容能帮助你更好地理解和使用animated_checkmark插件。如果有任何问题，欢迎随时提问！