Flutter动画计数器插件animated_counter的使用

Flutter动画计数器插件animated_counter的使用

简介

animated_counter 是一个在 FlutterCounterChallenge2020 中收集的动画计数器集合。

特性

  • 美丽流畅的动画
  • 可以增加、减少和获取当前计数值
  • 是 FlutterCounterChallenge2020 的一站式目的地
  • 完全开源
  • 支持 Null-Safety

支持平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter 桌面

在线预览

请注意，此页面是用 flutter-web 构建的，因此动画可能不够流畅。为了获得更好的用户体验，请在移动设备上运行示例应用。

安装

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

dependencies:
  animated_counter: ^1.0.0

然后导入该包：

import 'package:animated_counter/animated_counter.dart';

如何使用

首先创建你想要使用的动画计数器对象。然后使用其 build() 方法构建它，并通过 incrementCounter()、decrementCounter() 和 getCounter() 方法来控制动画。

创建你想要使用的动画计数器对象

BlocksCounter block = BlocksCounter(initialCounter: 0);
DisksCounter disk = DisksCounter(initialCounter: 0);
WaveCounter wave = WaveCounter(initialCounter: 0);
CircleWaveCounter circle;
RotatingBubblesCounter bub = RotatingBubblesCounter(
  initialCounter: 0,
  initialColors: [Colors.red, Colors.green, Colors.blue]
);
RotatingPlanetsCounter plan = RotatingPlanetsCounter(
  initialCounter: 0,
  initialColors: [Colors.red, Colors.green, Colors.blue]
);
CreatureCounter cre;
ImageBubbleCounter imgbub = ImageBubbleCounter(
  initialCounter: 0,
  image: 'assets/dash.jpg'
);
PortraitCounter por = PortraitCounter(
  initialCounter: 0,
  image: 'assets/mattis.jpeg'
);
ParticlesCounter part;
VolcanoCounter vol = VolcanoCounter(initialCounter: 0, enableSky: true);
PixelCounter pix = PixelCounter(initialCounter: 0);

[@override](/user/override)
void initState() {
  circle = CircleWaveCounter(
    vsync: this,
    initialCounter: 0,
    initialColors: [Colors.red, Colors.green, Colors.blue]
  );
  cre = CreatureCounter(
    vsync: this,
    initialCounter: 0,
    initialColors: [Colors.red, Colors.green, Colors.blue]
  );
  part = ParticlesCounter(initialCounter: 0, images: getAssetName());
  super.initState();
}

注意：CircleWaveCounter() 和 CreatureCounter() 需要 vsync，因此父类需要扩展 TickerProviderStateMixin 才能使用这些计数器。

使用 build() 方法在 Widget 树中使用，并通过 incrementCounter()、decrementCounter() 和 getCounter() 方法控制它

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: PageView(
      children: [
        block.build(context),
        disk.build(context),
        wave.build(context),
        circle.build(context),
        bub.build(context),
        plan.build(context),
        cre.build(context),
        imgbub.build(context),
        por.build(context),
        part.build(context),
        vol.build(context),
        pix.build(context),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          block.incrementCounter();
          disk.incrementCounter();
          wave.incrementCounter();
          circle.incrementCounter();
          bub.incrementCounter();
          plan.incrementCounter();
          cre.incrementCounter();
          imgbub.incrementCounter();
          por.incrementCounter();
          part.incrementCounter();
          vol.incrementCounter();
          pix.incrementCounter();
        });
      },
    ),
  );
}

更多关于Flutter动画计数器插件animated_counter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画计数器插件animated_counter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


animated_counter 是一个用于在 Flutter 中创建带有动画效果的计数器的插件。它可以帮助你在应用中实现数字的动态变化，使得计数器的增加或减少过程更加平滑和吸引人。

安装

首先，你需要在 pubspec.yaml 文件中添加 animated_counter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_counter: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

  1. 导入包

    在你的 Dart 文件中导入 animated_counter 包：

    import 'package:animated_counter/animated_counter.dart';

  2. 使用 AnimatedCounter

    AnimatedCounter 是一个小部件，你可以通过设置 value 属性来显示一个带有动画效果的计数器。

    class MyAnimatedCounter extends StatefulWidget {
  @override
  _MyAnimatedCounterState createState() => _MyAnimatedCounterState();
}

class _MyAnimatedCounterState extends State<MyAnimatedCounter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Counter Example'),
      ),
      body: Center(
        child: AnimatedCounter(
          value: _counter,
          textStyle: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

    在上面的例子中，AnimatedCounter 会根据 _counter 的值动态更新显示的数字，并且数字的变化会带有动画效果。

  3. 自定义动画效果

    AnimatedCounter 提供了多个参数来自定义动画效果：

    • duration: 动画的持续时间。
    • curve: 动画的曲线（如 Curves.easeInOut）。
    • textStyle: 数字的文本样式。
    • prefix: 在数字前添加的前缀。
    • suffix: 在数字后添加的后缀。

    例如：

    AnimatedCounter(
  value: _counter,
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  textStyle: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.blue),
  prefix: 'Count: ',
  suffix: ' times',
),

高级用法

你还可以通过 AnimatedCounter 的 builder 属性来自定义数字的显示方式。builder 接收一个 BuildContext 和一个 String 类型的 value，并返回一个 Widget。

AnimatedCounter(
  value: _counter,
  builder: (context, value) {
    return Text(
      'Count: $value',
      style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.red),
    );
  },
),
回到顶部