[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9295":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},9295,"Animated-Text-Kit","aagarwal1012\u002FAnimated-Text-Kit","aagarwal1012","🔔  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]","https:\u002F\u002Fanimated-text-kit.web.app",null,"Dart",1772,320,27,70,0,5,56.02,"MIT License",false,"master",true,[24,25,26,27,28,29,30],"animated-text-kit","animation","dart","flutter","flutter-package","material-design","text-animation","2026-06-12 04:00:43","\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fcover.gif?raw=true\"\u002F>\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">Animated Text Kit\u003C\u002Fh1>\n\n\u003Cp align=\"center\">A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in Codemagic's Ebook, \u003Ca href=\"https:\u002F\u002Fblog.codemagic.io\u002Fflutter-libraries-ebook-by-codemagic\u002Febook-flutter-libraries-we-love-by-codemagic.pdf\">\"Flutter libraries we love\"\u003C\u002Fa>. Try out our \u003Ca href=\"https:\u002F\u002Fanimated-text-kit.web.app\u002F\">live example app\u003C\u002Fa>.\u003C\u002Fp>\u003Cbr>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fflutter.dev\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPlatform-Flutter-02569B?logo=flutter\"\n      alt=\"Platform\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fanimated_text_kit\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fanimated_text_kit.svg\"\n      alt=\"Pub Package\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Faagarwal1012\u002Fanimated-text-kit?color=red\"\n      alt=\"License: MIT\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FSolido\u002Fawesome-flutter#animation\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAwesome-Flutter-FC60A8?logo=awesome-lists\"\n      alt=\"Awesome Flutter\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\u003Cbr>\n\n\u003Ca href=\"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fpackages-and-plugins\u002Ffavorites\">\n  \u003Cimg height=\"150\" align=\"right\" src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fflutter-favorite-badge.png?raw=true\">\n\u003C\u002Fa>\n\n# Table of contents\n\n- [Flutter Package of the Week](#flutter-package-of-the-week)\n- [Installing](#installing)\n- [Usage](#usage)\n  - [New with Version 3](#new-with-version-3)\n- [Animations](#animations)\n  - [Rotate](#rotate)\n  - [Fade](#fade)\n  - [Typer](#typer)\n  - [Typewriter](#typewriter)\n  - [Scale](#scale)\n  - [Colorize](#colorize)\n  - [TextLiquidFill](#textliquidfill)\n  - [Wavy](#wavy)\n  - [Flicker](#flicker)\n  - [Scramble](#scramble)\n  - [Bounce](#bounce)\n  - [Create your own Animations](#create-your-own-animations)\n- [Bugs or Requests](#bugs-or-requests)\n- [Contributors](#contributors)\n- [Star History](#star-history)\n\n# Flutter Package of the Week\n\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FfoQTKCQqVWk\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fflutter_package_of_the_week.PNG?raw=true\"\n      alt=\"Flutter Package of the Week\" \u002F>\n\u003C\u002Fa>\n\n# Installing\n\n### 1. Depend on it\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  animated_text_kit: ^4.2.2\n```\n\n### 2. Install it\n\nYou can install packages from the command line:\n\nwith `pub`:\n\n```\n$ pub get\n```\n\nwith `Flutter`:\n\n```\n$ flutter pub get\n```\n\n### 3. Import it\n\nNow in your `Dart` code, you can use:\n\n```dart\nimport 'package:animated_text_kit\u002Fanimated_text_kit.dart';\n```\n\n# Usage\n\n`AnimatedTextKit` is a _Stateful Widget_ that produces text animations.\nInclude it in your `build` method like:\n\n```dart\nAnimatedTextKit(\n  animatedTexts: [\n    TypewriterAnimatedText(\n      'Hello world!',\n      textStyle: const TextStyle(\n        fontSize: 32.0,\n        fontWeight: FontWeight.bold,\n      ),\n      speed: const Duration(milliseconds: 2000),\n    ),\n  ],\n\n  totalRepeatCount: 4,\n  pause: const Duration(milliseconds: 1000),\n  displayFullTextOnTap: true,\n  stopPauseOnTap: true,\n  controller: myAnimatedTextController\n)\n```\n\nIt has many configurable properties, including:\n\n- `pause` – the time of the pause between animation texts\n- `displayFullTextOnTap` – tapping the animation will rush it to completion\n- `isRepeatingAnimation` – controls whether the animation repeats\n- `repeatForever` – controls whether the animation repeats forever\n- `totalRepeatCount` – number of times the animation should repeat (when `repeatForever` is `false`)\n- `controller` - It allows for control over the animation by providing methods to play, pause and reset the text animations programmatically\n\nThere are also custom callbacks:\n\n- `onTap` – This is called when a user taps the animated text\n- `onNext(int index, bool isLast)` – This is called before the next text animation, after the previous one's pause\n- `onNextBeforePause(int index, bool isLast)` – This is called before the next text animation, before the previous one's pause\n- `onFinished` - This is called at the end, when the parameter `isRepeatingAnimation` is set to `false`\n\n**Note:** You might come up with an issue that the `text` does not get updated with `setState` as shown [here](https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fissues\u002F27). The solution to this, is a key that changes based on the text. For reference, watch [this](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=kn0EOS-ZiIc) video.\n\n## New with Version 3\n\nVersion 3 refactored the code so that common animation controls were moved to\n`AnimatedTextKit` and all animations, except for `TextLiquidFill`, extend from\n`AnimatedText`. This saved hundreds of lines of duplicate code, increased\nconsistency across animations, and makes it easier to create new animations.\n\nIt also makes the animations more flexible because multiple animations may now\nbe easily combined. For example:\n\n```dart\nAnimatedTextKit(\n  animatedTexts: [\n    FadeAnimatedText(\n      'Fade First',\n      textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),\n    ),\n    ScaleAnimatedText(\n      'Then Scale',\n      textStyle: TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),\n    ),\n  ],\n),\n```\n\nUsing the legacy `FadeAnimatedTextKit` is equivalent to using `AnimatedTextKit` with `FadeAnimatedText`.\nAn advantage of `AnimatedTextKit` is that the `animatedTexts` may be any subclass of `AnimatedText`, while using `FadeAnimatedTextKit` essentially restricts you to using just `FadeAnimatedText`.\n\n### Legacy AnimatedTextKit classes\n\nHave you noticed that animation classes come in pairs?\nFor example, there is `FadeAnimatedText` and `FadeAnimatedTextKit`.\nThe significant refactoring with Version 3 split the original `FadeAnimatedTextKit` into `FadeAnimatedText` and a re-usable `AnimatedTextKit`, then `FadeAnimatedTextKit` was adjusted for backwards compatibility.\n\nWhen introducing a new `AnimationText` subclass, you may wonder if you also need to also introduce an additional `Kit` class. The answer is **NO**. :tada:\n\nGoing forward, we are championing the adoption of the Version 3 approach, and have deprecated the legacy `Kit` classes.\nThis will make creating new animations easier.\nWe know it makes some legacy code more verbose, but the flexibility and simplicity is a conscious trade-off.\n\n# Animations\n\nMany animations are provided, but you can also [create your own animations](#create-your-own-animations).\n\n## Rotate\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Frotate.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nRow(\n  mainAxisSize: MainAxisSize.min,\n  children: \u003CWidget>[\n    const SizedBox(width: 20.0, height: 100.0),\n    const Text(\n      'Be',\n      style: TextStyle(fontSize: 43.0),\n    ),\n    const SizedBox(width: 20.0, height: 100.0),\n    DefaultTextStyle(\n      style: const TextStyle(\n        fontSize: 40.0,\n        fontFamily: 'Horizon',\n      ),\n      child: AnimatedTextKit(\n        animatedTexts: [\n          RotateAnimatedText('AWESOME'),\n          RotateAnimatedText('OPTIMISTIC'),\n          RotateAnimatedText('DIFFERENT'),\n        ],\n        onTap: () {\n          print(\"Tap Event\");\n        },\n      ),\n    ),\n  ],\n);\n```\n\n**Note:** You can override transition height by setting the value of parameter `transitionHeight` for RotateAnimatedTextKit class.\n\n## Fade\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Ffade.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 32.0,\n      fontWeight: FontWeight.bold,\n    ),\n    child: AnimatedTextKit(\n      animatedTexts: [\n        FadeAnimatedText('do IT!'),\n        FadeAnimatedText('do it RIGHT!!'),\n        FadeAnimatedText('do it RIGHT NOW!!!'),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Typer\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Ftyper.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 30.0,\n      fontFamily: 'Bobbers',\n    ),\n    child: AnimatedTextKit(\n      animatedTexts: [\n        TyperAnimatedText('It is not enough to do your best,'),\n        TyperAnimatedText('you must know what to do,'),\n        TyperAnimatedText('and then do your best'),\n        TyperAnimatedText('- W.Edwards Deming'),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Typewriter\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Ftypewriter.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 30.0,\n      fontFamily: 'Agne',\n    ),\n    child: AnimatedTextKit(\n      animatedTexts: [\n        TypewriterAnimatedText('Discipline is the best tool'),\n        TypewriterAnimatedText('Design first, then code'),\n        TypewriterAnimatedText('Do not patch bugs out, rewrite them'),\n        TypewriterAnimatedText('Do not test bugs out, design them out'),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Scale\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fscale.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 70.0,\n      fontFamily: 'Canterbury',\n    ),\n    child: AnimatedTextKit(\n      animatedTexts: [\n        ScaleAnimatedText('Think'),\n        ScaleAnimatedText('Build'),\n        ScaleAnimatedText('Ship'),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Colorize\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fcolorize.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nconst colorizeColors = [\n  Colors.purple,\n  Colors.blue,\n  Colors.yellow,\n  Colors.red,\n];\n\nconst colorizeTextStyle = TextStyle(\n  fontSize: 50.0,\n  fontFamily: 'Horizon',\n);\n\nreturn SizedBox(\n  width: 250.0,\n  child: AnimatedTextKit(\n    animatedTexts: [\n      ColorizeAnimatedText(\n        'Larry Page',\n        textStyle: colorizeTextStyle,\n        colors: colorizeColors,\n      ),\n      ColorizeAnimatedText(\n        'Bill Gates',\n        textStyle: colorizeTextStyle,\n        colors: colorizeColors,\n      ),\n      ColorizeAnimatedText(\n        'Steve Jobs',\n        textStyle: colorizeTextStyle,\n        colors: colorizeColors,\n      ),\n    ],\n    isRepeatingAnimation: true,\n    onTap: () {\n      print(\"Tap Event\");\n    },\n  ),\n);\n```\n\n**Note:** `colors` list should contains at least two values.\n\n## TextLiquidFill\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Ftext_liquid_fill.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: TextLiquidFill(\n    text: 'LIQUIDY',\n    waveColor: Colors.blueAccent,\n    boxBackgroundColor: Colors.redAccent,\n    textStyle: TextStyle(\n      fontSize: 80.0,\n      fontWeight: FontWeight.bold,\n    ),\n    boxHeight: 300.0,\n  ),\n);\n```\n\nTo get more information about how the animated text made from scratch by @HemilPanchiwala, visit the Medium [blog](https:\u002F\u002Flink.medium.com\u002FAfxVRdkWJ2).\n\n## Wavy\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fwavy.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn DefaultTextStyle(\n  style: const TextStyle(\n    fontSize: 20.0,\n  ),\n  child: AnimatedTextKit(\n    animatedTexts: [\n      WavyAnimatedText('Hello World'),\n      WavyAnimatedText('Look at the waves'),\n    ],\n    isRepeatingAnimation: true,\n    onTap: () {\n      print(\"Tap Event\");\n    },\n  ),\n);\n```\n\n## Flicker\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fflicker.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 35,\n      color: Colors.white,\n      shadows: [\n        Shadow(\n          blurRadius: 7.0,\n          color: Colors.white,\n          offset: Offset(0, 0),\n        ),\n      ],\n    ),\n    child: AnimatedTextKit(\n      repeatForever: true,\n      animatedTexts: [\n        FlickerAnimatedText('Flicker Frenzy'),\n        FlickerAnimatedText('Night Vibes On'),\n        FlickerAnimatedText(\"C'est La Vie !\"),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Scramble\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fscramble.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 40.0,\n      fontWeight: FontWeight.bold,\n    ),\n    child: AnimatedTextKit(\n      animatedTexts: [\n        ScrambleAnimatedText(\n          'Mobile Dev.',\n          speed: const Duration(milliseconds: 200),\n        ),\n        ScrambleAnimatedText('Explorer'),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Bounce\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002Fdisplay\u002Fbounce.gif?raw=true\" align = \"right\" height = \"300px\">\n\n```dart\nreturn SizedBox(\n  width: 250.0,\n  child: DefaultTextStyle(\n    style: const TextStyle(\n      fontSize: 60.0,\n      fontWeight: FontWeight.bold,\n    ),\n    child: AnimatedTextKit(\n      animatedTexts: [\n        BounceAnimatedText('Bounce!'),\n        BounceAnimatedText('Spring!'),\n        BounceAnimatedText('Jump!'),\n      ],\n      onTap: () {\n        print(\"Tap Event\");\n      },\n    ),\n  ),\n);\n```\n\n## Create your own Animations\n\nYou can easily create your own animations by creating new classes that extend\n`AnimatedText`, just like most animations in this package. You will need to\nimplement:\n\n- Class _constructor_ – Initializes animation parameters.\n- `initAnimation` – Initializes `Animation` instances and binds them to the given `AnimationController`.\n- `animatedBuilder` – Builder method to return a `Widget` based on `Animation` values.\n- `completeText` – Returns the `Widget` to display once the animation is complete. (The default implementation returns a styled `Text` widget.)\n\nThen use `AnimatedTextKit` to display the custom animated text class like:\n\n```dart\nAnimatedTextKit(\n  animatedTexts: [\n    CustomAnimatedText(\n      'Insert Text Here',\n      textStyle: const TextStyle(\n        fontSize: 32.0,\n        fontWeight: FontWeight.bold,\n      ),\n    ),\n  ],\n),\n```\n\n# Bugs or Requests\n\nIf you encounter any problems feel free to open an [issue](https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fissues\u002Fnew?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fissues\u002Fnew?template=feature_request.md) on GitHub and I'll look into it. Pull request are also welcome.\n\nSee [Contributing.md](https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md).\n\n## Contributors\n\nThanks to all our amazing contributors for their support and code!\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Faagarwal1012\u002FAnimated-Text-Kit\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=aagarwal1012\u002FAnimated-Text-Kit\" \u002F>\n\u003C\u002Fa>\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=aagarwal1012\u002FAnimated-Text-Kit&type=Date)](https:\u002F\u002Fstar-history.com\u002F#aagarwal1012\u002FAnimated-Text-Kit&Date)\n","Animated-Text-Kit 是一个用于创建酷炫文本动画的 Flutter 包。它提供了多种预设的文本动画效果，如旋转、淡入淡出、打字机效果等，并且支持自定义动画，使开发者能够轻松地为应用添加动态的文字展示。该库采用 Dart 语言编写，兼容所有 Flutter 支持的平台，是 Material Design 风格应用的理想选择。适用于需要吸引用户注意力或增强用户体验的各种场景，比如启动页、广告标语显示或是任何希望文字以更生动方式呈现的地方。",2,"2026-06-11 03:22:03","top_language"]