Flutter计数器插件smooth_counter的使用

Smooth Counter 是一个Flutter插件，它允许你执行平滑的计数递增或递减动画，就像使用Text widget一样简单。下面将详细介绍如何使用这个插件。

开始使用

添加依赖

首先，在你的pubspec.yaml文件中添加smooth_counter依赖：

dependencies:
  flutter:
    sdk: flutter
  smooth_counter: ^latest_version # 替换为最新版本号

然后运行flutter pub get来安装插件。

要求

确保你的项目满足以下要求：

• Dart 3.0.0+
• Flutter 3.10.0+

使用方法

你可以直接传递count给widget，或者使用controller来更灵活地控制动画效果。

直接使用count

这是最简单的方法。只需要传递一个整数变量，动画就会自动执行。

class _CounterState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter += 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SmoothCounter(
          count: _counter,
          textStyle: Theme.of(context).textTheme.headlineMedium,
        ),
        FilledButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

使用controller

如果你想要更改动画的曲线(curve)或持续时间(duration)，可以使用controller。

class _CounterState extends State<MyHomePage> {
  final _controller = SmoothCounterController(
    duration: const Duration(milliseconds: 1000),
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    _controller.count += 100;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SmoothCounter(
          controller: _controller,
          textStyle: Theme.of(context).textTheme.headlineMedium,
        ),
        FilledButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

分隔符设置

可以通过设置hasSeparator属性来决定是否显示数字间的分隔符，默认值为true。

SmoothCounter(
  count: _counter,
  hasSeparator: false, // 或者 true
),

设置	效果
true
false

初始显示时的动画

可以设置在初次构建时是否执行滚动动画，默认为true。

SmoothCounter(
  count: _counter,
  animateOnInit: false, // 或者 true
),

设置	效果
true
false

完整示例代码

这里提供了一个完整的示例代码，用于展示如何在一个简单的Flutter应用中使用smooth_counter插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter += 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            SmoothCounter(
              count: _counter,
              textStyle: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

希望这些信息对你有所帮助！如果你有任何问题，请随时提问。