Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is shown in its place. In Flutter this can be achieved with the help of AnimatedIcon Widget. A sample GIF is given below to get an idea about what we are going to do in this article.
Constructor
AnimatedIcon( {Key? key, required AnimatedIconData icon, required Animation<double> progress, Color? color, double? size, String? semanticLabel, TextDirection? textDirection} )
Properties
- color: The color to use when drawing the icon.
- hashCode: The hash code for this object.
- icon: The icon to display. Available icons are listed in AnimatedIcons.
- key: Controls how one widget replaces another widget in the tree.
- progress: The animation progress for the animated icon.
- runtimeType: A representation of the runtime type of the object.
- semanticLabel: Semantic label for the icon.
- size: The size of the icon in logical pixels.
- textDirection: The text direction to use for rendering the icon.
Example
- First, create the Flutter project by typing “flutter create app_name” in the terminal.
- Then, go to the “main. dart” file.
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp( const MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
debugShowCheckedModeBanner: false ,
);
}
} |
- In the “main.dart” file, create a stateful widget below MyApp.
Dart
class GFG1 extends StatefulWidget {
const GFG({ Key? key }) : super(key: key);
@override
State<GFG> createState() => _GFGState();
} // Widget that will be shown // at the start of application. class _GFGState extends State<GFG> {
@override
Widget build(BuildContext context) {
return Scaffold(
);
}
} |
- Inside Scaffold, create IconButton wrapped around the Center widget which will help make our button center. Then provide AnimatedIcon with Icon and controller to change to check icon.
Dart
class _GFGState extends State<GFG> with TickerProviderStateMixin {
// The controller to change our animated icon
late AnimationController _controller;
// Boolean to check state of our icon
bool isClicked = false ;
@override
void initState() {
// Initializing our controller
_controller = AnimationController(
duration: const Duration(
milliseconds: 800,
),
vsync: this ,
);
super.initState();
}
@override
void dispose() {
// Disposing controller
// when its not needed
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: IconButton(
iconSize: 70,
onPressed: () {
// Setting icon animation
// according isClicked variable
if (isClicked) {
_controller.forward();
} else {
_controller.reverse();
}
// Changing the value
// of isClicked variable
isClicked = !isClicked;
},
icon: AnimatedIcon(
icon: AnimatedIcons.list_view,
// providing controller
// to the AnimatedIcon
progress: _controller
),
),
),
);
}
} |
Output:
Recommended Articles