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

Last update: May 19, 2022

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.

GitHub

https://github.com/aagarwal1012/Animated-Text-Kit
Comments
  • 1. 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
    Reviewed by sahmadreza at 2020-12-09 11:33
  • 2. 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

    Reviewed by saurabhraj042 at 2021-03-12 14:36
  • 3. [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

    Reviewed by ThinkDigitalSoftware at 2020-12-13 05:31
  • 4. 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.

    Reviewed by Mohitmadhav at 2021-04-28 08:03
  • 5. 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.

    Reviewed by SirusCodes at 2020-10-11 04:42
  • 6. 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.

    Reviewed by vision-interactive at 2020-11-30 00:13
  • 7. 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.

    Reviewed by AdamSGit at 2019-09-22 15:53
  • 8. [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.

    Reviewed by aagarwal1012 at 2020-10-22 20:57
  • 9. 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 😁😁.

    Reviewed by ayagrwl at 2020-06-19 07:45
  • 10. 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
    Reviewed by ritvij14 at 2021-03-09 21:48
  • 11. [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
    Reviewed by aagarwal1012 at 2021-03-09 09:18
  • 12. Ability to control entry/exit animations of RotateAnimatedText

    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 [...]

    Currently. there is no way to control the direction of RotateAnimatedText for entry/exit animations.

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

    • Ability to override exit animation for example to fade out and up or out and down.
    • Ability to override entry animation for example to fade in and down or in and up.

    Describe alternatives you've considered Creating a custom text animation appears to be the only valid alternative, however, I feel like this can be built into the current widget.

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

    animate_do has some examples of fading options:

    FadeIn Animations

    • FadeIn
    • FadeInDown
    • FadeInDownBig
    • FadeInUp
    • FadeInUpBig
    • FadeInLeft
    • FadeInLeftBig
    • FadeInRight
    • FadeInRightBig

    FadeOut Animations

    • FadeOut
    • FadeOutDown
    • FadeOutDownBig
    • FadeOutUp
    • FadeOutUpBig
    • FadeOutLeft
    • FadeOutLeftBig
    • FadeOutRight
    • FadeOutRightBig
    Reviewed by chimon2000 at 2022-05-03 19:38
  • 13. Is it possible to go to next TypewriterAnimatedText when clicking the whole screen instead of just the widget?

    Hi, So my issue is I use typewriter effect inside a container widget of size 100x200. When I want to stop pause on tap, I must click inside the container. Is there a way to add a controller that can control when to go to the next TypewriterAnimatedText?

    Best regards.

    Reviewed by Linspirit98 at 2022-02-27 20:27
  • 14. Website not working properly on phone .. Used animated_text_kit package and inside readme in example section text amd example are not clearly visible .

    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.

    Reviewed by Athrav-droid at 2022-02-12 17:38

Related

A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.
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

Apr 4, 2022
Create powerful animations in Flutter and use the hero animation for complex animations
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

Dec 11, 2021
A flutter package which contains a collection of some cool and beautiful effects; support android and ios
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

May 12, 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

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 ?? ??

May 17, 2022
A package to create nice and smooth animations for flutter
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

Dec 5, 2021
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.

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

Nov 25, 2020
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.

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

May 18, 2022
A catalog of beautiful, reusable and elegant animations
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

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

Apr 2, 2022
Cool 3D Drawer Animated With flutter part 2 πŸ”₯ πŸ”₯
 Cool 3D Drawer Animated With flutter part 2 πŸ”₯ πŸ”₯

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

Feb 3, 2022
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS
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

May 20, 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

Apr 16, 2021
Flutter package for creating awesome animations.
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

May 18, 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

Apr 26, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.
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

May 17, 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

May 20, 2022
A set of transition patterns within the animations package using flutter.
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

Feb 9, 2022
Convert text to paths and animate them with this Flutter package
Convert text to paths and animate them with this Flutter package

Text to Path Maker This is a pure Flutter and Dart package that allows you to convert text--both characters and icons--into paths. It can generate SVG

May 6, 2022
Fun canvas animations in Flutter based on time and math functions.
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

May 12, 2022