πŸ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Overview

Animated Text Kit

A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in Codemagic's Ebook, "Flutter libraries we love". Try out our live example app.


Platform Pub Package Build Status Latest compatibility result for Stable channel Latest compatibility result for Beta channel Latest compatibility result for Dev channel
Codecov Coverage CodeFactor License: MIT Awesome Flutter Donate


Table of contents

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  animated_text_kit: ^4.1.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter pub get

3. Import it

Now in your Dart code, you can use:

import 'package:animated_text_kit/animated_text_kit.dart';

Usage

AnimatedTextKit is a Stateful Widget that produces text animations. Include it in your build method like:

AnimatedTextKit(
  animatedTexts: [
    TypewriterAnimatedText(
      'Hello world!',
      textStyle: const TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
      ),
      speed: const Duration(milliseconds: 2000),
    ),
  ],
  
  totalRepeatCount: 4,
  pause: const Duration(milliseconds: 1000),
  displayFullTextOnTap: true,
  stopPauseOnTap: true,
)

It has many configurable properties, including:

  • pause – the time of the pause between animation texts
  • displayFullTextOnTap – tapping the animation will rush it to completion
  • isRepeatingAnimation – controls whether the animation repeats
  • repeatForever – controls whether the animation repeats forever
  • totalRepeatCount – number of times the animation should repeat (when repeatForever is false)

There are also custom callbacks:

  • onTap – This is called when a user taps the animated text
  • onNext(int index, bool isLast) – This is called before the next text animation, after the previous one's pause
  • onNextBeforePause(int index, bool isLast) – This is called before the next text animation, before the previous one's pause
  • onFinished - This is called at the end, when the parameter isRepeatingAnimation is set to false

New with Version 3

Version 3 refactored the code so that common animation controls were moved to AnimatedTextKit and all animations, except for TextLiquidFill, extend from AnimatedText. This saved hundreds of lines of duplicate code, increased consistency across animations, and makes it easier to create new animations.

It also makes the animations more flexible because multiple animations may now be easily combined. For example:

AnimatedTextKit(
  animatedTexts: [
    FadeAnimatedText(
      'Fade First',
      textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
    ),
    ScaleAnimatedText(
      'Then Scale',
      textStyle: TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
    ),
  ],
),

Using the legacy FadeAnimatedTextKit is equivalent to using AnimatedTextKit with FadeAnimatedText. An advantage of AnimatedTextKit is that the animatedTexts may be any subclass of AnimatedText, while using FadeAnimatedTextKit essentially restricts you to using just FadeAnimatedText.

Legacy AnimatedTextKit classes

Have you noticed that animation classes come in pairs? For example, there is FadeAnimatedText and FadeAnimatedTextKit. The significant refactoring with Version 3 split the original FadeAnimatedTextKit into FadeAnimatedText and a re-usable AnimatedTextKit, then FadeAnimatedTextKit was adjusted for backwards compatibility.

When introducing a new AnimationText subclass, you may wonder if you also need to also introduce an additional Kit class. The answer is NO. πŸŽ‰

Going forward, we are championing the adoption of the Version 3 approach, and have deprecated the legacy Kit classes. This will make creating new animations easier. We know it makes some legacy code more verbose, but the flexibility and simplicity is a conscious trade-off.

Animations

Many animations are provided, but you can also create your own animations.

Rotate

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    const SizedBox(width: 20.0, height: 100.0),
    const Text(
      'Be',
      style: TextStyle(fontSize: 43.0),
    ),
    const SizedBox(width: 20.0, height: 100.0),
    DefaultTextStyle(
      style: const TextStyle(
        fontSize: 40.0,
        fontFamily: 'Horizon',
      ),
      child: AnimatedTextKit(
        animatedTexts: [
          RotateAnimatedText('AWESOME'),
          RotateAnimatedText('OPTIMISTIC'),
          RotateAnimatedText('DIFFERENT'),
        ]
        onTap: () {
          print("Tap Event");
        },
      ),
    ),
  ],
);

Note: You can override transition height by setting the value of parameter transitionHeight for RotateAnimatedTextKit class.

Fade

return SizedBox(
  width: 250.0,
  child: DefaultTextStyle(
    style: const TextStyle(
      fontSize: 32.0,
      fontWeight: FontWeight.bold,
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        FadeAnimatedText('do IT!'),
        FadeAnimatedText('do it RIGHT!!'),
        FadeAnimatedText('do it RIGHT NOW!!!'),
      ],
      onTap: () {
        print("Tap Event");
      },
    ),
  ),
);

Typer

return SizedBox(
  width: 250.0,
  child: DefaultTextStyle(
    style: const TextStyle(
      fontSize: 30.0,
      fontFamily: 'Bobbers',
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        TyperAnimatedText('It is not enough to do your best,'),
        TyperAnimatedText('you must know what to do,'),
        TyperAnimatedText('and then do your best'),
        TyperAnimatedText('- W.Edwards Deming'),
      ]
      onTap: () {
        print("Tap Event");
      },
    ),
  ),
);

Typewriter

return SizedBox(
  width: 250.0,
  child: DefaultTextStyle(
    style: const TextStyle(
      fontSize: 30.0,
      fontFamily: 'Agne',
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        TypewriterAnimatedText('Discipline is the best tool'),
        TypewriterAnimatedText('Design first, then code'),
        TypewriterAnimatedText('Do not patch bugs out, rewrite them'),
        TypewriterAnimatedText('Do not test bugs out, design them out'),
      ],
      onTap: () {
        print("Tap Event");
      },
    ),
  ),
);

Scale

return SizedBox(
  width: 250.0,
  child: DefaultTextStyle(
    style: const TextStyle(
      fontSize: 70.0,
      fontFamily: 'Canterbury',
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        ScaleAnimatedText('Think'),
        ScaleAnimatedText('Build'),
        ScaleAnimatedText('Ship'),
      ],
      onTap: () {
        print("Tap Event");
      },
    ),
  ),
);

Colorize

const colorizeColors = [
  Colors.purple,
  Colors.blue,
  Colors.yellow,
  Colors.red,
];

const colorizeTextStyle = TextStyle(
  fontSize: 50.0,
  fontFamily: 'Horizon',
);

return SizedBox(
  width: 250.0,
  child: AnimatedTextKit(
    animatedTexts: [
      ColorizeAnimatedText(
        'Larry Page',
        textStyle: colorizeTextStyle,
        colors: colorizeColors,
      ),
      ColorizeAnimatedText(
        'Bill Gates',
        textStyle: colorizeTextStyle,
        colors: colorizeColors,
      ),
      ColorizeAnimatedText(
        'Steve Jobs',
        textStyle: colorizeTextStyle,
        colors: colorizeColors,
      ),
    ],
    isRepeatingAnimation: true,
    onTap: () {
      print("Tap Event");
    },
  ),
);

Note: colors list should contains at least two values.

TextLiquidFill

return SizedBox(
  width: 250.0,
  child: TextLiquidFill(
    text: 'LIQUIDY',
    waveColor: Colors.blueAccent,
    boxBackgroundColor: Colors.redAccent,
    textStyle: TextStyle(
      fontSize: 80.0,
      fontWeight: FontWeight.bold,
    ),
    boxHeight: 300.0,
  ),
);

To get more information about how the animated text made from scratch by @HemilPanchiwala, visit the Medium blog.

Wavy

return DefaultTextStyle(
  style: const TextStyle(
    fontSize: 20.0,
  ),
  child: AnimatedTextKit(
    animatedTexts: [
      WavyAnimatedText('Hello World'),
      WavyAnimatedText('Look at the waves'),
    ],
    isRepeatingAnimation: true,
    onTap: () {
      print("Tap Event");
    },
  ),
);

Create your own Animations

You can easily create your own animations by creating new classes that extend AnimatedText, just like most animations in this package. You will need to implement:

  • Class constructor – Initializes animation parameters.
  • initAnimation – Initializes Animation instances and binds them to the given AnimationController.
  • animatedBuilder – Builder method to return a Widget based on Animation values.
  • completeText – Returns the Widget to display once the animation is complete. (The default implementation returns a styled Text widget.)

Then use AnimatedTextKit to display the custom animated text class like:

AnimatedTextKit(
  animatedTexts: [
    CustomAnimatedText(
      'Insert Text Here',
      textStyle: const TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
      ),
    ),
  ],
),

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.

See Contributing.md.

Contributors

Thanks goes to these wonderful people (emoji key):


Muhammed Salih Guler

πŸ›

Anders Cheow

πŸ› πŸ€”

Rohit Ashiwal

πŸ›

AdamSGit

πŸ€” 🚧

Hemil Panchiwala

🚧 πŸ€” πŸ“– πŸ’‘

YiMing Han

πŸ€”

Aayush Malhotra

🚧 πŸ€” πŸ›

Anthony Whitford

πŸ€” 🚧

Jordy Wong

πŸ›

Darshan Rander

πŸ€” πŸ’» 🎨

Nsiah Akuoko Jeremiah

πŸ’»

Aniket Ambore

πŸ“–

Abhay V Ashokan

πŸ’»

Ritvij Kumar Sharma

πŸ’»

This project follows the all-contributors specification. Contributions of any kind are welcome! See Contributing.md.

Comments
  • Error in first run after upgrade to v3.0.0

    Error in first run after upgrade to v3.0.0

    Hi, After updating the plugin version from 2.5.4 to 3.0.0, an error will be displayed below the first run.

    But after a few seconds the animation starts and works

    I did not change the code and just updated the plugin and after the update this problem occurred

    My Code:

                        SizedBox(
                          height: 100,
                          child: FadeAnimatedTextKit(
                            onTap: () {
                              print("Tap Event");
                            },
                            isRepeatingAnimation: true,
                            text: [
                              "do IT!",
                              "do it RIGHT!!",
                              "do it RIGHT NOW!!!"
                            ],
                            textStyle: TextStyle(
                                fontSize: 27.0,
                                fontWeight: FontWeight.w400,
                              color: Colors.white
                            ),
                            textAlign: TextAlign.start,
                          ),
                        ),
    
    

    Expected behavior

    ════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
    The following NoSuchMethodError was thrown building AnimatedBuilder(animation: AnimationController#f1944(β–Ά 0.942), dirty, state: _AnimatedState#da5af):
    The getter 'value' was called on null.
    Receiver: null
    Tried calling: value
    
    The relevant error-causing widget was: 
      FadeAnimatedTextKit file:///E:/Projects/Android/robo_investment/lib/app.dart:112:30
    When the exception was thrown, this was the stack: 
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
    #1      FadeAnimatedText.animatedBuilder (package:animated_text_kit/src/fade.dart:45:24)
    #2      _AnimatedTextKitState.build.<anonymous closure> (package:animated_text_kit/src/animated_text.dart:187:32)
    #3      AnimatedBuilder.build (package:flutter/src/widgets/transitions.dart:1443:19)
    #4      _AnimatedState.build (package:flutter/src/widgets/transitions.dart:181:48)
    ...
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    

    (package:animated_text_kit/src/fade.dart:45:24) :

      @override
      Widget animatedBuilder(BuildContext context, Widget child) {
        return Opacity(
          opacity: **_fadeIn.value** != 1.0 ? _fadeIn.value : _fadeOut.value,
          child: textWidget(text),
        );
      }
    

    Screenshots https://i.imgur.com/2s1nTEo.png

    Flutter: Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.18363.1082], locale en-US)

    • version 1.22.4
    • channel stable

    Dart:

    • version 2.10.4

    Android Studio.

    • version: 4.1.0
    bug 
    opened by sahmadreza 38
  • New ZoomInFadeOut animation added

    New ZoomInFadeOut animation added

    Issues: Fixes #207

    Description: I added a new ZoomInFadeOut animation. Updated the Example app and readme.md accordingly

    This is how the animation is looking right now zoomInFadeOut

    GSSOC21 level3 
    opened by saurabhraj042 15
  • [Proposal] Add onFinishedBeforePause Parameter

    [Proposal] Add onFinishedBeforePause Parameter

    Describe the bug I'm running an animation after another one ends, but I want it to start immediately after the last animation is complete. I have a 1 second pause time and that runs before it calls my function and I can't remove that pause.

    Expected behavior The function is called immediately after the last animation is complete, rather than animate > pause > animate > pause >onFinished. animated_text_kit: ^3.0.1

    enhancement 
    opened by ThinkDigitalSoftware 15
  • setState text workaround solution added in README

    setState text workaround solution added in README

    Fixes #198

    1. Wrote the setState text issue in the README file.
    2. Added the solution (a key that changes based on the text) along with the video by Google Developers.

    Please tell if anything else needs to be added - Like flutter documentation, etc.

    documentation GSSOC21 level0 
    opened by Mohitmadhav 13
  • Can use SingleTickerProviderStateMixin

    Can use SingleTickerProviderStateMixin

    We can use SingleTickerProviderStateMixin in almost all of animations.

    Current implementation We are calling setting _controller and Animation each time

    _controller = AnimationController(
        duration: _duration,
        vsync: this,
    );
    

    Better implementation We set _controller and Animation in initState an call forward each time

    _controller.forward(from:  0.0);
    

    This will reduce the calls which we are making in each cycle. Using SingleTickerProviderStateMixin is more efficient than TickerProviderStateMixin.

    If you want I would like to collaborate on this.

    opened by SirusCodes 13
  • Delay animation start

    Delay animation start

    Is your feature request related to a problem? Please describe. I have a Row of many Animated Texts that should appear as a phrase, each one with his own effect, but making it delayed present problems in all workarounds i have tried.

    Describe the solution you'd like the perfect solution would be to have a delay Duration in the Text animation Widgets, will not only fill this need, but also any other when the animation should start after build (and not fade in with the animation already started)

    Describe alternatives you've considered IΒ΄ve tried a Animation Controller and AnimatedWidget to enable the text after a specific progress, but log is filled with "setState() or markNeedsBuild() called during build". because the childs are calling SetState and some of the text animations are glitched and restarted using a future.delayed enabler makes everything more complex and fail to get a simple "restart" animation control as the AnimationController do.

    opened by vision-interactive 12
  • Typer Class Enhancments

    Typer Class Enhancments

    Refer to issue #34 The Typer Class has been greatly improved in term of control.

    Let's start with breaking changes :

    The duration parameter has become two new ones : speed and pause

    • speed is the elapsed time between the animation of each characters of a text (Default is 40 ms)
    • pause is the pause duration between texts (Default is 500 ms)

    New features :

    Three new callbacks come alongside the onTap :

    • onNext(int index, bool isLast) - This callback will be called before the next text animation, after the previous one's pause.
    • onNextBeforePause(int index, bool isLast) - This callback will be called before the next text animation, before the previous one's pause.
    • onFinished - This callback is called at the end, if the parameter isRepeatingAnimation is set to false

    Two new arguments :

    • displayFullTextOnTap - If true, tapping the screen will stop current animated text, and display it fully for min(remaining, pause) time. (Default is false)
    • stopPauseOnTap - If true, tapping during a pause will stop it and start the next text animation (Default is false)

    The text list parameter now accept either strings, or map where you can give a text custom speed and pause.


    If you like thoses changes, I'll make another commit with updated readme regarding this PR with code examples.

    opened by AdamSGit 12
  • [feat] Increase test coverage

    [feat] Increase test coverage

    Current Codecov test coverage is 69%, our goal is to increase this coverage to more than 90%. We can take reference from flutter_spinkit tests -- https://github.com/jogboms/flutter_spinkit/tree/master/test.

    enhancement testing 
    opened by aagarwal1012 11
  • Add Feature in TypewriterAnimatedKit allowing users to have variable typing speed.

    Add Feature in TypewriterAnimatedKit allowing users to have variable typing speed.

    Pull Request Process

    1. Ensure any install or build dependencies are removed before the end of the layer when doing a build.
    2. Update the README.md if needed with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters.
    3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is SemVer.
    4. You may merge the Pull Request in once you have the sign-off of one developer, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

    By taking an Additional curves parameter in the input, i made the typing speed (which was linear), follow the variable speed provided by the curve (In the TypewriterAnimationKit). Updated README and formatted code. Please build the example code to see the new animation. My favourite curve is the Curves.bounceIn 😁😁.

    opened by ayagrwl 11
  • added customisable fade in and fade out timings

    added customisable fade in and fade out timings

    Pull Request Process

    1. Ensure any install or build dependencies are removed before the end of the layer when doing a build.
    2. Update the README.md if needed with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters.
    3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is SemVer.
    4. You may merge the Pull Request in once you have the sign-off of one developer, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

    Issues:

    Fixes #190

    Description:

    • I added the fadeInEnd and fadeOutStart fields as optional fields for FadeAnimatedTextKit
    • Added a check to ensure that fadeInEnd is lesser than fadeOutStart
    enhancement GSSOC21 level2 
    opened by ritvij14 10
  • [feat] Prepare animated text kit flutter web app for demo

    [feat] Prepare animated text kit flutter web app for demo

    Description

    Rather than suggesting everyone install the example app to experience Animated Text Kit in action, it will be better to host the example app on Github Pages using single page flutter web application. Other suggestions are highly welcomed.

    Resources

    • https://flutter.dev/web
    • https://medium.com/@zonble/use-github-pages-to-host-your-flutter-web-app-as-an-example-of-your-flutter-package-cb7b5b726eb1
    • https://maheshmnj.medium.com/deploying-your-flutter-webapp-to-github-pages-111ff9e5cbc9
    enhancement documentation GSSOC21 level2 
    opened by aagarwal1012 10
  • ScaledAnimatedText causes the whole page content to do a little vertical jump on each animation cycle

    ScaledAnimatedText causes the whole page content to do a little vertical jump on each animation cycle

    Describe the bug ScaledAnimatedText causes the whole page content to do a little jump on each animation cycle. On all platforms. The content goes up and then down by about 2 or 3 pixels each time.

    To Reproduce

    const DURATION_6 = Duration(milliseconds: 2000);
    AnimatedTextKit(
            pause: DURATION_0,
            repeatForever: true,
            animatedTexts: [
              ScaleAnimatedText(
                'xxx',
                scalingFactor: 0.9,
                textAlign: TextAlign.center,
                duration: DURATION_6,
              ),
              ScaleAnimatedText(
                'xxx',
                scalingFactor: 0.9,
                textAlign: TextAlign.center,
                duration: DURATION_6,
              ),
              ScaleAnimatedText(
                '.xxx',
                scalingFactor: 0.9,
                textAlign: TextAlign.center,
                duration: DURATION_6,
              ),
              ScaleAnimatedText(
                'xxx',
                scalingFactor: 0.9,
                textAlign: TextAlign.center,
                duration: DURATION_6,
              ),
              ScaleAnimatedText('.xxx',
                  textAlign: TextAlign.center,
                  scalingFactor: 0.9,
                  duration: DURATION_6),
              ScaleAnimatedText('or anywhere else...',
                  textAlign: TextAlign.center,
                  scalingFactor: 0.9,
                  duration: DURATION_6),
              ScaleAnimatedText('xxx',
                  textAlign: TextAlign.center,
                  scalingFactor: 0.9,
                  duration: DURATION_6,
                  textStyle: const TextStyle(
                      color: Color(0xff3F51B5), fontWeight: FontWeight.w500)),
            ],
          ),
    

    Expected behavior No jump.

    version: animated_text_kit: ^4.2.2

    Flutter:

    • 3.0.3
    • stable

    Dart:

    • 2.17.5
    opened by BenjiFarquhar 0
  • ABOUT DefaultTextStyle

    ABOUT DefaultTextStyle

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [ For defaultTextStyle 2 child widgets are needed some parent widgets like sliverboxadapter does not take multiple child widgets so every animated text needs individual textstyle]

    Describe the solution you'd like Keeping DefaultTextStyle inside AnimatedTextKit before animatedTexts:[] like

    AnimatedTextKit( DefaultTextStyle() animatedTexts:[] )

    Describe alternatives you've considered used textstyle individually for multiple texts

    Additional context Add any other context or screenshots about the feature request here.

    opened by DEVANCE24 0
  • TypewriterAnimatedText Want new feature

    TypewriterAnimatedText Want new feature

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    I want the different text style in the parameter text in the typewriteranimated text so will you consider the rich text as the parameter text so it will help to create different styles in the one word

    opened by MuneerAhamed01 2
  • cant see blinking cursor in TypewriterAnimatedText

    cant see blinking cursor in TypewriterAnimatedText

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Flutter:

    • version
    • channel

    Dart:

    • version

    Additional context Add any other context about the problem here.

    opened by vagun 0
  • Support returning currently displayed text onTap

    Support returning currently displayed text onTap

    Describe the solution you'd like

    AnimatedTextKit(
      onTap: (String currentText) {
        // I can do something with currentText here.
      }
    )
    

    Additional context This is useful for animated text kit in the search bar, which users can quickly tap to the displayed text to search for it.

    opened by simonpham 0
Releases(v4.2.2)
  • v4.2.2(Jun 5, 2022)

    What's Changed

    • Fix position in wavy animation by @SirusCodes in https://github.com/aagarwal1012/Animated-Text-Kit/pull/242
    • setState text workaround solution added in README by @Mohitmadhav in https://github.com/aagarwal1012/Animated-Text-Kit/pull/243
    • docs: add Mohitmadhav as a contributor by @allcontributors in https://github.com/aagarwal1012/Animated-Text-Kit/pull/244
    • Added ',' after Animated child block by @sxmeer-ahmed in https://github.com/aagarwal1012/Animated-Text-Kit/pull/261

    New Contributors

    • @Mohitmadhav made their first contribution in https://github.com/aagarwal1012/Animated-Text-Kit/pull/243
    • @sxmeer-ahmed made their first contribution in https://github.com/aagarwal1012/Animated-Text-Kit/pull/261

    Full Changelog: https://github.com/aagarwal1012/Animated-Text-Kit/compare/v4.2.0...v4.2.2

    Source code(tar.gz)
    Source code(zip)
  • v4.2.0(Apr 14, 2021)

    • Flicker Animated Text by @CoderInTheWoods.
    • TypewriterAnimatedText may now be customized to adjust the cursor.
    • Legacy Kit classes are now marked as deprecated
    • DefaultTextStyle may be used to set a common text style across AnimatedText instances
    • textStyle is no longer required for AnimatedText subclasses (except for ColorizeAnimatedText)
    • FadeAnimatedText may now be customized to adjust the fade-in and fade-out interval
    • BREAKING CHANGE: AnimatedText.completeText now has a BuildContext parameter
    • Migrated to nnbd(null-safety)
    • Added Flutter Favorite badge to readme.
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Dec 17, 2020)

    Enhancements

    • Added rotateOut flag to RotateAnimatedText so that one may optionally disable the rotation-out animation.
    • Updated the example app to demonstrate RotateAnimatedText with rotateOut disabled.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(Dec 15, 2020)

    • Fixed major bug #168, introduced with version 3.0.0
    • Updated the example app to show a Tap Count
    • Optimized the dispose for AnimatedTextKit.
    • Added missing return type to onNext function signatures.
    • Optimized the initState for AnimatedTextKit.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Dec 7, 2020)

    v3.0.0

    • Refactored code to reduce duplication, improve consistency, and simplify making new animations. Created AnimatedText and AnimatedTextKit. PR #157
    • Removed the unused alignment property from all except RotateAnimatedTextKit. Resolves #153
    • Added a textDirection property to ColorizeAnimatedTextKit to support RTL text. Resolves #109
    • Added a loadUntil property to TextLiquidFill to optionally show a partial fill. Resolves #75
    • Optimized TextLiquidFill. PR #165
    • Optimized ColorizeAnimatedTextKit. PR #155
    • Updated the Dart SDK constraint to be 2.10+.
    • Regenerated the example platform code. PR #162
    • Migrated from Travis CI to GitHub Actions.
    Source code(tar.gz)
    Source code(zip)
  • v2.5.4(Nov 6, 2020)

  • v2.5.3(Nov 1, 2020)

    Bug Fixes and Enhancements

    • Updated the README to revert links to be pub.dev friendly.
    • Bug fix for ScaleAnimatedTextKit to check mounted before setState to avoid potential conflict with dispose. Resolves #105 -- PR #143
    • Minor bug fix to RotateAnimatedTextKit to properly handle alignment property, and introduced textDirection property #138
    • Increased test coverage #128
    Source code(tar.gz)
    Source code(zip)
  • v2.5.0(Oct 24, 2020)

    @awhitford is on fire, a ton of bug fixes and improvements from his side.

    • Increase test coverage #137 and #135.
    • Removed redundant _texts variables #133.
    • Added pedantic lint rules. #132.
    • Refactored code to move default logic from the State class to the StatefulWidget #131.
    • Revised _textKey to not be a global variable. Resolves #129 issue -- PR #130.
    • Other basic improvements #136 and #134.
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Oct 14, 2020)

  • v2.3.0(Oct 3, 2020)

    New Animated Text

    Issues Fixed

    Code Review #81

    • Removed obsolete new keywords.
    • Added types to collection and function variables.
    • Added final and const keywords.
    • Replaced null guards with concise ?. and ?? operators.
    • Added missing null check on dispose for FadeAnimatedTextKit.
    • In fade.dart, renamed the _RotatingTextState class to _FadeTextState to be consistent with the overall pattern and avoid confusion with _RotatingTextState in rotate.dart.

    Warning:

    • Removed onNextBeforePause from ColorizeAnimatedTextKit because it was not referenced.

    Feature Enhancement

    • Add repeatForever option.

      repeatForever: true, //this will ignore [totalRepeatCount]
      
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Dec 26, 2019)

    2.0.0

    • TextLiquidFill animated text added to the packageπŸŽ‰πŸŽ‰

    • Breaking Changes: Different arguments are included in the classes and duration has been broken into speed and pause in some classes as per their needs.

      • duration - Change the duration from the animation time of the complete list to single element animation time.
      • speed - Time between the display of characters.
      • pause - Delay between the animation of texts.
      • totalRepeatCount - Sets the number of times animation should repeat
      • displayFullTextOnTap - If true, tapping the screen will stop current animated text, and display it fully.
      • stopPauseOnTap - If true, tapping during a pause will stop it and start the next text animation.
    • Better control over Animated Texts:
      Callbacks added:

      • onNext(int index, bool isLast) - This callback will be called before the next text animation, after the previous ones pause.
      • onNextBeforePause(int index, bool isLast) - This callback will be called before the next text animation, before the previous one's pause.
      • onFinished - This callback is called at the end when the parameter isRepeatingAnimation is set to false.
    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Jan 30, 2019)

  • v1.2.0(Nov 21, 2018)

  • v1.1.0(Sep 19, 2018)

Owner
Ayush Agarwal
Research Intern @adobe | GSoC'20 Mentor @jenkinsci | GSoC'19 @typetools | CSE Senior @IITR | Flutter Developer @mdg-iitr
Ayush Agarwal
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 19 Aug 16, 2022
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚑  Social Media  Twit

null 3 Dec 11, 2021
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

倧桷豚 450 Sep 28, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 520 Sep 24, 2022
This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Aadarsh Patel 13 Nov 25, 2020
A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

null 9 Dec 5, 2021
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

HeavenOSK 80 Sep 14, 2022
A catalog of beautiful, reusable and elegant animations

Animations Catalog The goal of this project is to catalog and build multiple animation patterns with flutter. Budget App Animation Harley Swipe To Enl

null 3 Sep 6, 2021
A growing collection of cool, elegant, efficient and performance-optimized animation widgets.

im_animations About A growing collection of cool, elegant, efficient and performance-optimized animation widgets. Feedback For any feedback please fil

iMujtaba Nazki 15 Sep 18, 2022
Cool 3D Drawer Animated With flutter part 2 πŸ”₯ πŸ”₯

Cool 3D Drawer Animated With flutter part 2 ?? ??

Hmida 10 Sep 10, 2022
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 133 Aug 29, 2022
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 846 Sep 21, 2022
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Andre Cytryn 171 Sep 23, 2022
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Xavier H. 856 Sep 25, 2022
A set of transition patterns within the animations package using flutter.

Flutter Motion Transitions A fultter app to demonstrate Material motion system. Material Motion System The four main Material transition patterns are

Rafsan Ahmad 15 Aug 26, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 454 Sep 29, 2022
Making drawings and animations in Flutter extremely simple

?? GraphXβ„’ | rendering | prototype | design | Making drawings and animations in Flutter extremely simple. wiki-tips. To get some extended, boring expl

Roi Peker 358 Sep 25, 2022