Skip to content

Add additional parameters to ColorizeAnimatedText for better control #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
M4dhav wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add additional parameters to ColorizeAnimatedText for better control #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/android/settings.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ pluginManagement {

plugins {
id "dev.flutter.flutter-plugin-loader" version "1.0.0"
id "com.android.application" version "8.1.0" apply false
id "com.android.application" version "8.1.1" apply false
Copy link
Author

@M4dhav M4dhav Nov 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was made as Gradle version 8.1.0 is no longer supported by Flutter and the example app does not build

id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

Expand Down
25 changes: 14 additions & 11 deletions lib/src/colorize.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,23 @@ class ColorizeAnimatedText extends AnimatedText {
/// By default it is set to [TextDirection.ltr]
final TextDirection textDirection;

///Specifies whether to fade in text when starting to render.
/// By default it is true.
final bool fadeInOnStart;

/// Specifies the curve for the color transition animation.
/// By default it is set to [Curves.easeIn]
final Curve animationCurve;

ColorizeAnimatedText(
String text, {
TextAlign textAlign = TextAlign.start,
required TextStyle textStyle,
this.speed = const Duration(milliseconds: 200),
required this.colors,
this.textDirection = TextDirection.ltr,
this.fadeInOnStart = true,
this.animationCurve = Curves.easeIn,
}) : assert(null != textStyle.fontSize),
assert(colors.length > 1),
super(
Expand All @@ -36,7 +46,7 @@ class ColorizeAnimatedText extends AnimatedText {
duration: speed * text.characters.length,
);

late Animation<double> _colorShifter, _fadeIn, _fadeOut;
late Animation<double> _colorShifter, _fadeIn;
// Copy of colors that may be reversed when RTL.
late List<Color> _colors;

Expand All @@ -48,20 +58,13 @@ class ColorizeAnimatedText extends AnimatedText {
0.75 *
(textCharacters.length / 15.0);

_fadeIn = Tween<double>(begin: 0.0, end: 1.0).animate(
_fadeIn = Tween<double>(begin: fadeInOnStart ? 0.0 : 1.0, end: 1.0).animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.0, 0.1, curve: Curves.easeOut),
),
);

_fadeOut = Tween<double>(begin: 1.0, end: 1.0).animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.9, 1.0, curve: Curves.easeIn),
),
);

Comment on lines -58 to -64
Copy link
Author

@M4dhav M4dhav Nov 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fadeOut was animating from 1 to 1 and so essentially not doing anything, so I removed it for better code readability

final colorShift = colors.length * tuning;
final colorTween = textDirection == TextDirection.ltr
? Tween<double>(
Expand All @@ -75,7 +78,7 @@ class ColorizeAnimatedText extends AnimatedText {
_colorShifter = colorTween.animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.0, 1.0, curve: Curves.easeIn),
curve: Interval(0.0, 1.0, curve: animationCurve),
),
);

Expand Down Expand Up @@ -105,7 +108,7 @@ class ColorizeAnimatedText extends AnimatedText {
@override
Widget animatedBuilder(BuildContext context, Widget? child) {
return Opacity(
opacity: _fadeIn.value != 1.0 ? _fadeIn.value : _fadeOut.value,
opacity: _fadeIn.value,
child: completeText(context),
);
}
Expand Down