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

Overview

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,
      ),
    ],
  ),
)
Comments
  • 0 in AnimatedFlipCounter with custom font gets spaced weirdly

    0 in AnimatedFlipCounter with custom font gets spaced weirdly

    For some reason, the 0 in the AnimatedFlipCounter with a custom font is spaced weirdly, so it gets cut off.

    Left: Normal Text Widget Right: AnimatedFlipCounter

    Screenshot_1082

    opened by edeuss 5
  • Is it possible to increase the vertical animation space for the digits?

    Is it possible to increase the vertical animation space for the digits?

    Currently, the digits animate up and down exactly at the edge of the text height. I would like to increase the space that the digits move in to fit the vertical space in the container it is in.

    image

    Is there a way to adjust this? Thanks.

    opened by alguintu 3
  • prepending zero

    prepending zero

    I am trying to use this widget for a simple 2-digit countdown and also for a clock. I need 2-digits shown at any time (ie 11, 10, 09, 08, 07...). I can prepend '0' for values that are <10 but I will lose the animation for that zero that's added. Any way to have this feature?

    My current workaround:

    AnimatedFlipCounter(
      value: time.toDouble(),
      prefix: time<10 ? '0' : '',
    ),
    
    opened by ench0 2
  • Change of Copyright notice

    Change of Copyright notice

    Hello! Could you change Copyright notice in your MIT License (software flutter-animated-counter) and add the author's name and surname, bacause the author's nickname "h65wang" can be changed in the future and this can make it difficult to identify the copyright owner of your software. Thank you in advance!

    opened by lubovtorina 1
  • Single text widgets having more width than single text widget

    Single text widgets having more width than single text widget

    I wonder if there is a solution for this?

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("123,123,123", style: TextStyle(fontSize: 24)),
            Row(
              children: [
                Text("1", style: TextStyle(fontSize: 24)),
                Text("2", style: TextStyle(fontSize: 24)),
                Text("3", style: TextStyle(fontSize: 24)),
                Text(",", style: TextStyle(fontSize: 24)),
                Text("1", style: TextStyle(fontSize: 24)),
                Text("2", style: TextStyle(fontSize: 24)),
                Text("3", style: TextStyle(fontSize: 24)),
                Text(",", style: TextStyle(fontSize: 24)),
                Text("1", style: TextStyle(fontSize: 24)),
                Text("2", style: TextStyle(fontSize: 24)),
                Text("3", style: TextStyle(fontSize: 24)),
              ],
            ),
          ],
        );
    

    IMG_268FDF42EC11-1

    opened by SimonHausdorf 1
  • support for rtl languages

    support for rtl languages

    for example in arabic locale the app in RTL the number is 123

    it will display like 321

    i had to wrap the widget in Directionality to force ltr direction

    opened by maxzod 0
  • What about different fonts?

    What about different fonts?

    I found a bug with the size with different fonts, what if was possible to override the size of number? I could make that pull request if is a bug that more people have, I guess I will need to fix it anyway for my company app

    _SingleDigitFlipCounter(
                  key: ValueKey("decimal$i"),
                  value: digits[i].toDouble(),
                  duration: duration,
                  curve: curve,
                  size: digitSize ? digitSize : prototypeDigit.size,
                  color: color,
                  padding: padding,
                ),
    
    opened by ivofernandes 6
  • Pause / get current value

    Pause / get current value

    Hello!

    I have an intention to make a scoreboard with this package. I am curious about whether is it possible to pause and get the current value.

    Let's say I set the duration to 40 seconds and, the user clicked the pause button after 20 seconds. I would like to stop the animation and get the last rendered value. I looked for the controller but couldn't find it.

    Thanks in advance!

    opened by okandemirofficial 0
  • Tween animation when adding digits

    Tween animation when adding digits

    I was wondering if it would be easy to add a tween animation if the width is expanding (a digit is added). There is already a tween animation for the "-". To implement it like in the video below, we would need to know the width of the number and the width after adding a digit if I am not wrong.

    Any suggestion?

    https://user-images.githubusercontent.com/1446685/169464500-83e6ffe1-bd25-48b4-a7a7-9121c1322b18.mp4

    opened by SimonHausdorf 0
  • text value spacing issue

    text value spacing issue

    AnimatedFlipCounter( curve: Curves.slowMiddle, value: price, fractionDigits: 2, // decimal precision textStyle: const TextStyle( letterSpacing: -4.0, wordSpacing: 0.0, color: simpleTextColor, fontWeight: FontWeight.w700, fontSize: 32.0, ), ),

    opened by husnain067 7
Owner
null
Widget Workshops

Widget Workshops by SuperDeclarative! Hello! This is the source code repository for Widget Workshops created by SuperDeclarative! Check out the SuperD

Matt Carroll 15 Feb 1, 2022
An implicit animation widget for rotation

AnimatedRotation An implicitly animated version of RotationTransition which automatically transitions the rotation over time when the provided angle c

Jason Rai 10 Jun 4, 2021
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vũ Phương 2 Jul 4, 2022
Dart package that converts number to words (English language)A Flutter/Dart package that converts number to words (English language)

flutter_number_to_words_english A Flutter/Dart package that converts number to words (English language) Flutter (Null Safety) Flutter (Channel stable,

Ke Nguyen 4 Dec 9, 2022
Another example of transitioning over a single tap or one click

magic_8_ball_flutter A new Flutter project. It is another example of transitioning over a single tap or one click. Getting Started This project is a s

Avinandan Bose 1 Mar 21, 2022
Flashy_tab_bar - One another nice animated tabbar

One another nice animated tabbar (Inspired by Cuberto) Getting Started Add the dependency at pubspec.yaml:

TheBrio 9 Nov 16, 2022
This app developed for making fun with sms. You can send huge sms to other's number by one click. It is behaving like a bomb

SMS Bomber This app developed for making fun with sms. You can send huge sms to other's number by one click. It is behaving like a bomb Getting Starte

Md Abir Ahsan Tahmim 1 Dec 21, 2021
Login Animation Ruchika GuptaLogin Animation [953⭐] - Smooth animation from login to home by Ruchika Gupta.

Flutter Login Home Animation A new open-source Flutter project that enables the developer to quickly get started with the Flutter animation and applic

GeekyAnts 1.1k Dec 28, 2022
Flutter: Animation Series || Episode 1 || Basic Animation || Episode 1 || Basic Animation

animationseries A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Pawan Kumar 24 Oct 31, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A flutter package which display the library collapse according to the number of images associated with hero animation

?? Gallery Collapse A flutter package which display the library collapse accordi

null 6 Sep 12, 2022
A full-fledged one-to-one chat app developed entirely in Flutter

Enigma Enigma - A minimalist, locked-down one-to-one chat app. Usage Flutter - Get Started Since this is a Firebase dependent project, create a Fireba

Amit Joki 389 Dec 23, 2022
Change Application's name, package name, icon and Splash in one shot by one Command on Android & IOS

Change Application's name, package name, icon and Splash in one shot by one Command on Android & IOS. Installing dart pub global activate before_publi

null 10 Oct 27, 2022
Bloon - One click, One party - app to find club in Paris

Bloon Bloon is mobile application for E3 project in ESIEE Paris. It list all night clubs and events in Paris and recommend you according to you person

null 57 Oct 17, 2021
Google one tap sign in - Flutter Google One Tap Sign In (Android)

Google One Tap Sign In Google One Tap Sign In (Android) A Flutter Plugin for Goo

null 6 Nov 23, 2022
One Dungeon is a ​1-Bit-style platformer game that consists of one level

One Dungeon is a ​1-Bit-style platformer game that consists of one level. It developed during the Midyear 2022 Flame Game Jam.

Bulent Baris Kilic 6 Sep 21, 2022
Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls into your app with only a few lines of code.

Call Kit (ZegoUIKitPrebuiltCall) Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls

ZEGOCLOUD 9 Dec 26, 2022
NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners.

NumberPicker NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners. Example: (See example for more)

Marcin Szałek 273 Nov 4, 2022
A radio button widget for flutter that supports custom builders and a variable number of animations.

custom_radio An animatable radio button that can be customized to the max. I found it strange that flutter only provides two radio widgets: Radio and

Conrad Heidebrecht 37 Dec 28, 2022