Flutter digital animation library: animated_flip_counter

foreword

In the production of digital animation, sometimes we are faced with tight time or unsatisfactory results. At this time, using ready-made animation libraries or tools can greatly improve efficiency and achieve better results. animated_flip_counterIt is a very good digital animation library that can help us quickly create satisfactory effects. By using this library, we can easily achieve digital flipping and animation effects without writing animation code from scratch, saving a lot of time and effort. Therefore, when we need to realize the function of digital animation, animated_flip_counterit is a wise choice to use it directly.

ps: The above is edited by Wenxin Yiyan

use

Official address
https://pub-web.flutter-io.cn/packages/animated_flip_counter

Install

flutter pub add animated_flip_counter

Example 1

import 'package:animated_flip_counter/animated_flip_counter.dart';

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          "无动画：$year",
          style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        ),
        const SizedBox(
          height: 50,
        ),
        AnimatedFlipCounter(
          value: year,
          duration: const Duration(milliseconds: 500), // 动画持续时间
          textStyle:const TextStyle(fontSize: 30, fontWeight: FontWeight.bold) , // 文本样式
          prefix: "有动画：", // 前缀
        ),
        const SizedBox(
          height: 50,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
                onPressed: () {
    
    
                  setState(() {
    
    
                    year += 1;
                  });
                },
                child: const Text("加1")),
            ElevatedButton(
                onPressed: () {
    
    
                  setState(() {
    
    
                    year -= 1;
                  });
                },
                child: const Text("减1")),
            ElevatedButton(
                onPressed: () {
    
    
                  setState(() {
    
    
                    year += 10;
                  });
                },
                child: const Text("加10")),
            ElevatedButton(
                onPressed: () {
    
    
                  setState(() {
    
    
                    year -= 10;
                  });
                },
                child: const Text("减10"))
          ],
        )
      ],
    );

Example 2

After adding precision, the problem of numerical precision calculation will be automatically handled

 AnimatedFlipCounter(
   value: num,
   fractionDigits: 2, // 设置精度
   duration: const Duration(milliseconds: 500), // 动画持续时间
   textStyle:const TextStyle(fontSize: 30, fontWeight: FontWeight.bold) , // 文本样式
   prefix: "有动画：", // 前缀
 ),

Example 3

Note: The time obtained is the time on your mobile phone (simulator). If the time of the mobile phone itself is not accurate, the time obtained will also be inaccurate. In addition, whether it is a 12-hour format or a 24-hour format is also related to the settings of the mobile phone.

class SwitcherContainerState extends State<SwitcherContainer> {
    
    
  // 时分秒
  int _hour = 0;
  int _minutes = 0;
  int _seconds = 0;

  // 初始化
  @override
  void initState() {
    
    
    super.initState();

    Timer.periodic(
        const Duration(
          seconds: 1,
        ), (timer) {
    
    
      setState(() {
    
    
        final now = DateTime.now();
        _hour = now.hour;
        _minutes = now.minute;
        _seconds = now.second;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedFlipCounter(
            value: _hour,
            suffix: ':',
          ),
          AnimatedFlipCounter(
            value: _minutes,
            suffix: ':',
          ),
          AnimatedFlipCounter(
            value: _seconds,
          )
        ],
      ),
    );
  }
}