Flutter数字计数动画插件number_counting_animation的使用

NumberCountingAnimation 是一个简单的Flutter数字计数动画小部件。通过这个插件，您可以轻松地为数字添加动态效果，使得用户界面更加生动。

安装

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  number_counting_animation: ^1.0.2

运行 flutter pub get 来安装该插件。

CountingAnimation 属性

以下是 CountingAnimation 小部件的主要属性及其描述：

使用示例

下面是一个完整的示例代码，展示如何使用 CountingAnimation：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:number_counting_animation/number_counting_animation.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: 'Counting Animation Demo', value: 12345),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  int intValue = 0;
  String var1 = '';
  String var2 = '';
  String var3 = '';
  String var4 = '';

  void initData(int value) {
    intValue = value;
    var formatCurrency = NumberFormat.simpleCurrency(locale: "ko_KR", name: '', decimalDigits: 0);
    String formatStr = formatCurrency.format(value);

    var1 = value.toString();
    var2 = '₩${value.toString()}.123';
    var3 = '₩$formatStr';
    var4 = '[$formatStr]';
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    initData(widget.value);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          initData(intValue + 1111);
        },
      ),
      body: Center(
        child: Column(
          children: [
            const Spacer(),
            CountingAnimation(
              value: var1,
              textStyle: const TextStyle(color: Colors.black, fontSize: 20),
              scrollCount: 20,
              singleScollDuration: const Duration(milliseconds: 50),
              lastDuration: const Duration(milliseconds: 1000),
            ),
            const Spacer(),
            CountingAnimation(
              value: var2,
              textStyle: const TextStyle(color: Colors.blue, fontSize: 20),
              useChar: true,
            ),
            const Spacer(),
            CountingAnimation(
              value: var3,
              textStyle: const TextStyle(color: Colors.blue, fontSize: 20),
              useChar: true,
            ),
            const Spacer(),
            CountingAnimation(
              value: var4,
              textStyle: const TextStyle(color: Colors.blue, fontSize: 20),
              useChar: true,
              scrollCount: 10,
              singleScollDuration: const Duration(milliseconds: 200),
              lastDuration: const Duration(milliseconds: 1000),
            ),
            const Spacer(),
          ],
        ),
      ),
    );
  }
}

示例说明

• 在主页面中，我们创建了四个 CountingAnimation 小部件，每个小部件展示了不同的格式和动画设置。
• 点击浮动按钮会增加显示的数值，并重新初始化动画。
• useChar 属性用于控制是否包含非动画字符。
• scrollCount 和 singleScrollDuration 控制动画的速度和步数。

通过这些示例，您可以看到如何灵活地使用 number_counting_animation 插件来增强您的应用体验。希望这对您有所帮助！