Flutter supports all type of animation and of them is Blinking Animation. In this tutorial we would implement Blinking animation on Text widget using AnimationController. Flutter gives us separate package class named as animation.dart to perform all type of animations. We would create blinking text animation using 2 Colors. We would define the animation starting color and ending color and change the colors using animation properties. So in this tutorial we would Create Blinking Text Animation in Flutter Android iOS Example Tutorial.
Contents in this project Create Blinking Text Animation in Flutter Android iOS Example Tutorial:
1. Import material.dart and animation.dart package in your app’s main.dart file.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; |
2. Create void main runApp() method and call our app’s main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with StatelessWidget widget. This class is our main View class. As you can see in below code we are calling BlinkingTextAnimation() function object of class which would design our Animation text view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: [ BlinkingTextAnimation(), ] ) ) ) ) ); } } |
4. Create a class named as BlinkingTextAnimation extends with StatefulWidget widget. In this class we would call our createState() method named with _BlinkingAnimationState class. The createState() method creates the mutable state for widget.
|
1 2 3 4 |
class BlinkingTextAnimation extends StatefulWidget { @override _BlinkingAnimationState createState() => _BlinkingAnimationState(); } |
5. Create our main animation class named as _BlinkingAnimationState extends with state. We are creating the animation by changing color to white to red. The animation starting color is White and animation ending color is Red.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
class _BlinkingAnimationState extends State<BlinkingTextAnimation> with SingleTickerProviderStateMixin { Animation<Color> animation; AnimationController controller; initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this); final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.ease); animation = ColorTween(begin: Colors.white, end: Colors.red).animate(curve); animation.addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } setState(() {}); }); controller.forward(); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: animation, builder: (BuildContext context, Widget child) { return new Container( child: Text('Blinking Text Animation', style: TextStyle(color: animation.value, fontSize: 27)), ); }); } dispose() { controller.dispose(); super.dispose(); } } |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: [ BlinkingTextAnimation(), ] ) ) ) ) ); } } class BlinkingTextAnimation extends StatefulWidget { @override _BlinkingAnimationState createState() => _BlinkingAnimationState(); } class _BlinkingAnimationState extends State<BlinkingTextAnimation> with SingleTickerProviderStateMixin { Animation<Color> animation; AnimationController controller; initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this); final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.ease); animation = ColorTween(begin: Colors.white, end: Colors.red).animate(curve); animation.addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } setState(() {}); }); controller.forward(); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: animation, builder: (BuildContext context, Widget child) { return new Container( child: Text('Blinking Text Animation', style: TextStyle(color: animation.value, fontSize: 27)), ); }); } dispose() { controller.dispose(); super.dispose(); } } |
Screenshot:
