How to animate the color of a text with multiple colors flutter
4,344
Solution 1
Pablo's answer (using ColorTween) will animate the color between two values. In order to transition among several colors, you can adapt that solution to either
- build a "TweenSequence" chaining multiple color tweens
- use RainbowColor which simplifies transition between multiple colors
See my article Multicolor Transitions in Flutter for a walkthrough on doing either.
For reference, here's a multi-color (B->G->R) animated text widget using RainbowColor.
class ColorText extends StatefulWidget {
const ColorText({
Key key,
}) : super(key: key);
@override
_ColorTextState createState() => _ColorTextState();
}
class _ColorTextState extends State<ColorText>
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<Color> _colorAnim;
@override
void initState() {
super.initState();
controller = AnimationController(duration: Duration(seconds: 3), vsync: this);
_colorAnim = RainbowColorTween([Colors.blue,
Colors.green,
Colors.red,
Colors.blue])
.animate(controller)
..addListener(() { setState(() {}); })
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reset();
controller.forward();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
@override
Widget build(BuildContext context) {
return Text("Hello!", style: TextStyle(color: _colorAnim.value));
}
}
Solution 2
The example below animate a text color through a Colors range.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
AnimationController controller;
Animation animation;
Color color;
@override
@mustCallSuper
void initState() {
super.initState();
controller=AnimationController(
vsync: this,
duration: Duration(seconds: 5)
);
animation=ColorTween(begin:Colors.red,end: Colors.white).animate(controller);
animation.addListener((){
setState(() {
color=animation.value;
});
});
controller.forward();
}
@override
Widget build(BuildContext context) {
return MaterialApp(home:Scaffold(
appBar: AppBar(title: Text("Example")),
body:Center(child:Text("HELLO!!!",textScaleFactor:3,style: TextStyle(color: color),))));
}
}
Author by
Randy ortan
Updated on December 20, 2022Comments
-
Randy ortan over 1 year
I want my text to animate through multiple colors in flutter how can I do it.
-
Kherel almost 4 yearsthere are few different type of animation in flutter... watch this youtube series about animation from the flutter team youtube.com/playlist?list=PLjxrf2q8roU2v6UqYlt_KPaXlnjbYySua
-
Kherel almost 4 yearsand they have an episode about changing color.
-
Randy ortan almost 4 yearsthanks man let me check that out
-