an Implicit Animation Widget That Flips From one Number to Another for Flutter

animated_flip_counter 

An implicit animation widget that flips from one number to another.

Usage 

It can be useful to display information that's constantly changing.

Animated Counter 

Simply pass in a value and an optional duration and curve, just like any other implicit animation widget in Flutter.

AnimatedFlipCounter(
  duration: Duration(milliseconds: 500),
  value: _value, // pass in a value like 2014
)

Decimal Display 

Use fractionDigits to specify how many digits to show after the decimal point. It handles negative values as well.

AnimatedFlipCounter(
  value: _value,
  fractionDigits: 2, // decimal precision
  suffix: "%",
  textStyle: TextStyle(
      fontSize: 40,
      color: _value >= 0 ? Colors.green : Colors.red,
  ),
)

Custom Style 

Use the familiar TextStyle parameter for styling, and use prefix and suffix for additional texts.

AnimatedFlipCounter(
  value: _value,
  prefix: "Level ",
  textStyle: TextStyle(
    fontSize: 80,
    fontWeight: FontWeight.bold,
    letterSpacing: -8.0,
    color: Colors.yellow,
    shadows: [
      BoxShadow(
        color: Colors.orange,
        offset: Offset(8, 8),
        blurRadius: 8,
      ),
    ],
  ),
)

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add animated_flip_counter

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  animated_flip_counter: ^0.2.6

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:animated_flip_counter/animated_flip_counter.dart';

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedFlipCounter Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            AnimatedFlipCounter(
              value: 1000 + _value,
            ),
            AnimatedFlipCounter(
              value: 1000 + _value,
              wholeDigits: 4,
              fractionDigits: 2,
              thousandSeparator: ',',
            ),
            AnimatedFlipCounter(
              value: _value,
              duration: Duration(seconds: 2),
              padding: EdgeInsets.symmetric(vertical: 8),
              curve: Curves.elasticOut,
              textStyle: TextStyle(fontSize: 60, color: Colors.pink),
            ),
            AnimatedFlipCounter(
              value: _value,
              duration: Duration(seconds: 1),
              curve: Curves.bounceOut,
              wholeDigits: 4,
              fractionDigits: 2,
              textStyle: TextStyle(fontSize: 40, color: Colors.blue),
            ),
            AnimatedFlipCounter(
              value: _value,
              prefix: "Level ",
              padding: EdgeInsets.all(8),
              textStyle: TextStyle(
                fontSize: 80,
                fontWeight: FontWeight.bold,
                letterSpacing: -8.0,
                color: Colors.yellow,
                shadows: [
                  BoxShadow(
                    color: Colors.orange,
                    offset: Offset(2, 4),
                    blurRadius: 4,
                  ),
                ],
              ),
            ),
            AnimatedFlipCounter(
              value: _value + 0.48,
              fractionDigits: 2,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [0.07, 0.48, 1, 5, 24].map(_buildButton).toList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildButton(num value) {
    return Column(
      children: [
        ElevatedButton(
          child: Text('+$value'),
          onPressed: () => setState(() => _value += value),
        ),
        ElevatedButton(
          child: Text('-$value'),
          onPressed: () => setState(() => _value -= value),
        ),
      ],
    );
  }
}

Download details:

Author: h65wang

Source: https://github.com/h65wang/flutter-animated-counter

#flutter #android #ios