diff --git a/.all-contributorsrc b/.all-contributorsrc index 7c7cd97..2501acc 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -140,6 +140,26 @@ "contributions": [ "code" ] + }, + { + "login": "Koniiro", + "name": "Koniiro", + "avatar_url": "https://avatars.githubusercontent.com/u/81352867?v=4", + "profile": "https://github.com/Koniiro", + "contributions": [ + "doc" + ] + }, + { + "login": "CoderInTheWoods", + "name": "Kalgi Sheth", + "avatar_url": "https://avatars.githubusercontent.com/u/25412142?v=4", + "profile": "https://github.com/CoderInTheWoods", + "contributions": [ + "code", + "example", + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/CHANGELOG.md b/CHANGELOG.md index 4814ed9..8e36b97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 4.2.0 + +**New Animated Text** + +- Flicker Animated Text by [@CoderInTheWoods](https://github.com/CoderInTheWoods). + ## 4.1.1 - `TypewriterAnimatedText` may now be customized to adjust the cursor. diff --git a/README.md b/README.md index 6078242..0221e20 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ - [Colorize](#colorize) - [TextLiquidFill](#textliquidfill) - [Wavy](#wavy) + - [Flicker](#flicker) - [Create your own Animations](#create-your-own-animations) - [Bugs or Requests](#bugs-or-requests) - [Donate](#donate) @@ -83,7 +84,7 @@ Add this to your package's `pubspec.yaml` file: ```yaml dependencies: - animated_text_kit: ^4.1.1 + animated_text_kit: ^4.2.0 ``` ### 2. Install it @@ -427,6 +428,40 @@ return DefaultTextStyle( ); ``` +## Flicker + + + +```dart +return SizedBox( + width: 250.0, + child: DefaultTextStyle( + style: const TextStyle( + fontSize: 35, + color: Colors.white, + shadows: [ + Shadow( + blurRadius: 7.0, + color: Colors.white, + offset: Offset(0, 0), + ), + ], + ), + child: AnimatedTextKit( + repeatForever: true, + animatedTexts: [ + FlickerAnimatedText('Flicker Frenzy'), + FlickerAnimatedText('Night Vibes On'), + FlickerAnimatedText("C'est La Vie !"), + ], + onTap: () { + print("Tap Event"); + }, + ), + ), +); +``` + ## Create your own Animations You can easily create your own animations by creating new classes that extend @@ -486,6 +521,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Abhay V Ashokan
💻
Ritvij Kumar Sharma
💻 + +
Koniiro
📖 +
Kalgi Sheth
💻 💡 📖 + diff --git a/display/flicker.gif b/display/flicker.gif new file mode 100644 index 0000000..cb153a2 Binary files /dev/null and b/display/flicker.gif differ diff --git a/example/lib/main.dart b/example/lib/main.dart index 7c85f5e..c5c618b 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -98,6 +98,7 @@ class AnimatedTextExample { final String label; final Color? color; final Widget child; + const AnimatedTextExample({ required this.label, required this.color, @@ -311,6 +312,32 @@ List animatedTextExamples({VoidCallback? onTap}) => ), ), ), + AnimatedTextExample( + label: 'Flicker', + color: Colors.pink[300], + child: DefaultTextStyle( + style: const TextStyle( + fontSize: 35, + color: Colors.white, + shadows: [ + Shadow( + blurRadius: 7.0, + color: Colors.white, + offset: Offset(0, 0), + ), + ], + ), + child: AnimatedTextKit( + repeatForever: true, + animatedTexts: [ + FlickerAnimatedText('Flicker Frenzy'), + FlickerAnimatedText('Night Vibes On'), + FlickerAnimatedText("C'est La Vie !"), + ], + onTap: onTap, + ), + ), + ), AnimatedTextExample( label: 'Combination', color: Colors.pink, diff --git a/lib/animated_text_kit.dart b/lib/animated_text_kit.dart index 5b9d5b9..632b22f 100644 --- a/lib/animated_text_kit.dart +++ b/lib/animated_text_kit.dart @@ -10,3 +10,4 @@ export 'src/colorize.dart'; export 'src/scale.dart'; export 'src/text_liquid_fill.dart'; export 'src/wavy.dart'; +export 'src/flicker.dart'; diff --git a/lib/src/flicker.dart b/lib/src/flicker.dart new file mode 100644 index 0000000..6e20af8 --- /dev/null +++ b/lib/src/flicker.dart @@ -0,0 +1,98 @@ +import 'package:flutter/material.dart'; +import 'animated_text.dart'; + +/// Animated Text that displays a [Text] element, as a flickering glow text. +/// +/// ![Flicker example](https://raw.githubusercontent.com/aagarwal1012/Animated-Text-Kit/master/display/flicker.gif) +class FlickerAnimatedText extends AnimatedText { + /// Marks ending of flickering entry interval of text + final double entryEnd; + final Duration speed; + + FlickerAnimatedText( + String text, { + TextAlign textAlign = TextAlign.start, + TextStyle? textStyle, + this.speed = const Duration(milliseconds: 1600), + this.entryEnd = 0.5, + }) : super( + text: text, + textStyle: textStyle, + duration: speed, + ); + + late Animation _entry; + + @override + void initAnimation(AnimationController controller) { + _entry = Tween(begin: 0.0, end: 1.0).animate( + CurvedAnimation( + parent: controller, + curve: Interval(0.0, entryEnd, curve: Curves.bounceIn), + ), + ); + } + + @override + Widget completeText(BuildContext context) => SizedBox.shrink(); + + @override + Widget animatedBuilder(BuildContext context, Widget? child) { + return Opacity( + opacity: _entry.value != 1.0 ? _entry.value : _entry.value, + child: textWidget(text), + ); + } +} + +@Deprecated('Use AnimatedTextKit with FlickerAnimatedText instead.') +class FlickerAnimatedTextKit extends AnimatedTextKit { + FlickerAnimatedTextKit({ + Key? key, + required List text, + TextAlign textAlign = TextAlign.start, + TextStyle? textStyle, + TextDirection textDirection = TextDirection.ltr, + Duration speed = const Duration(milliseconds: 1600), + double entryEnd = 0.5, + VoidCallback? onTap, + void Function(int, bool)? onNext, + void Function(int, bool)? onNextBeforePause, + VoidCallback? onFinished, + bool isRepeatingAnimation = true, + int totalRepeatCount = 3, + bool repeatForever = false, + bool displayFullTextOnTap = false, + bool stopPauseOnTap = false, + }) : super( + key: key, + animatedTexts: + _animatedTexts(text, textAlign, textStyle, speed, entryEnd), + onTap: onTap, + onNext: onNext, + onNextBeforePause: onNextBeforePause, + onFinished: onFinished, + isRepeatingAnimation: isRepeatingAnimation, + totalRepeatCount: totalRepeatCount, + repeatForever: repeatForever, + displayFullTextOnTap: displayFullTextOnTap, + stopPauseOnTap: stopPauseOnTap, + ); + + static List _animatedTexts( + List text, + TextAlign textAlign, + TextStyle? textStyle, + Duration speed, + double entryEnd, + ) => + text + .map((_) => FlickerAnimatedText( + _, + textAlign: textAlign, + textStyle: textStyle, + speed: speed, + entryEnd: entryEnd, + )) + .toList(); +} diff --git a/pubspec.yaml b/pubspec.yaml index cd1059b..f9f89c5 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: animated_text_kit description: A flutter package project which contains a collection of cool and beautiful text animations. -version: 4.1.1 +version: 4.2.0 homepage: https://github.com/aagarwal1012/Animated-Text-Kit/ maintainer: Ayush Agarwal (@aagarwal1012) diff --git a/test/smoke_test.dart b/test/smoke_test.dart index 0aa2b83..c9772f3 100644 --- a/test/smoke_test.dart +++ b/test/smoke_test.dart @@ -1,6 +1,7 @@ import 'package:animated_text_kit/animated_text_kit.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; + // ignore: avoid_relative_lib_imports import '../example/lib/main.dart'; @@ -102,6 +103,15 @@ void main() { tapped = true; }, ), + // ignore: deprecated_member_use_from_same_package + FlickerAnimatedTextKit( + text: tripleText, + textStyle: textStyle, + displayFullTextOnTap: true, + onTap: () { + tapped = true; + }, + ), ]; for (var widget in tapableWidgets) {