In this blog, we are going to learn about how to create an animated icon in a flutter. So let’s get started.
An identifier for the supported material design animated icons. It represents a value that can change over the lifetime of an animation.
Use with AnimatedIcon class to show specific animated icons.
An animated icon is aligned with both the visual design and the action they perform.
Read more about Flutter app development services from Mobikul.
To implement the Animated Icon do follow the below steps mentioned below.
1.) Create a Scaffold.
2.) Create suitable variables.
3.) Do initialize the animation controller.
1.) Create a Scaffold. :
Inside Scaffold widgets, it Implements the basic material design visual layout structure.
This class provides APIs for showing drawers and bottom sheets. We can add the background color inside the scaffold widget.
It also supports special Material Design components, such as Drawers, AppBars, and SnackBars.
|
1 2 3 4 5 6 |
class DemoAppIcon extends StatefulWidget { const DemoAppIcon({Key? key}) : super(key: key); @override _DemoAppIconState createState() => _DemoAppIconState(); } |
2.) Create suitable variables.
Now, create an variables for animation and controller. The animation controller is a class that allows us to control the animation.
|
1 2 |
late Animation<double> animation; late AnimationController controller; |
3.) Do initialize the animation controller.
After creating the suitable variable, we need to initialize an action to animated controller displayed.
The animation controller is a class that allows us to control the animation. It always generates new values whenever the application is ready for a new frame.
The full code is mentioned below.
|
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 |
import 'package:flutter/material.dart'; void main() => runApp(const DemoAppIcon()); // #docregion diff class IconAnimationDemo extends AnimatedWidget { const IconAnimationDemo({Key? key, required Animation<double> animation}) : super(key: key, listenable: animation); // Make the Tweens static because they don't change. static final _demoopacityTween = Tween<double>(begin: 0.2, end: 1); static final _sizedemoTween = Tween<double>(begin: 0, end: 400); @override Widget build(BuildContext context) { final animation = listenable as Animation<double>; return Center( child: Opacity( opacity: _demoopacityTween.evaluate(animation), child: Container( margin: const EdgeInsets.symmetric(vertical: 10), height: _sizedemoTween.evaluate(animation), width: _sizedemoTween.evaluate(animation), child: const FlutterLogo(), ), ), ); } } class DemoAppIcon extends StatefulWidget { const DemoAppIcon({Key? key}) : super(key: key); @override _DemoAppIconState createState() => _DemoAppIconState(); } class _DemoAppIconState extends State<DemoAppIcon> with SingleTickerProviderStateMixin { late Animation<double> animation; late AnimationController controller; @override void initState() { super.initState(); // #docregion AnimationController, tweens controller = AnimationController(duration: const Duration(seconds: 1), vsync: this); // #enddocregion AnimationController, tweens animation = CurvedAnimation(parent: controller, curve: Curves.easeIn) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } }); controller.forward(); } @override Widget build(BuildContext context) => IconAnimationDemo(animation: animation); @override void dispose() { controller.dispose(); super.dispose(); } } |
We can now run the app on how to create an animated icon in a flutter.
Finally, we have implemented the flow of creating an animated icon in a flutter.
Hope this blog helps you to create an animated icon in a flutter.
So, I hope it will help you out in understanding and getting a brief idea about it.
You can also check these Links.
Another mentioned URL.
For more understanding please can go through this Link:
That’s all, You can enjoy your App-bar with app drawer implementation in a flutter.
Thank you very much.
Be the first to comment.