Flutter Animations: A Guide to Creating Beautiful Animations in Your App
Animations play a critical role in making a mobile app look and feel more engaging and intuitive. Flutter, with its powerful animation framework, makes it easy for us to create beautiful animations in your app. In this article, we will explore the different types of animations available in Flutter and how to use them to make our app beautiful.
Why Use Animations in Your App?
Animations will enhance the user experience of our app. it can help us to convey information, provide feedback, guide users through app flows, and create a sense of delight and engagement. Some key benefits of using animations in your app:
- Engaging User Experience: Animations can make our app more interactive and immersive, creating a delightful experience for our users.
- Visual Feedback: Animations can provide visual feedback to our users, indicating the outcome of their actions or the status of an operation.
- Guided User Flow: Animations can guide users through app flows, making it easier for them to understand how to interact with our app.
- Brand Personality: Animations can help establish our app’s brand personality by adding unique and memorable visual elements.
- Polished App: Well-designed animations can make our app look more polished and professional, enhancing its overall quality.
Types of Animations in Flutter
Flutter provides various types of animations that you we can use in our app. Here are some common types of animations in Flutter:
- Implicit Animations: Implicit animations are animations that are automatically created when the value of a property changes. For example, we can create a fade-in animation by changing the opacity of a widget from 0 to 1. Implicit animations are easy to implement and require minimal code.
- Explicit Animations: Explicit animations are animations that are created using
AnimationControllerandAnimationwidgets. it provide more control over the animation process, allowing us to define custom animations with precise timing and interpolation. - Hero Animations: Hero animations are animations that transition a widget from one screen to another, often used for smooth transitions between screens or when transitioning between two different states of a widget.
- Custom Animations: Flutter allows you to create custom animations using the
AnimationControllerandAnimationwidgets, giving you complete control over the animation process. Custom animations are ideal when you need to create complex and unique animations that are not easily achievable using implicit or explicit animations.
Implicit Animations
To create implicit animations in Flutter, you need to wrap the widget that you want to animate with an Animated widget. For example, to animate the color of a Container, you can wrap it with an AnimatedContainer widget like this:
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
bool _isExpanded = false;
Color _containerColor = Colors.blue;
void _toggleContainer() {
setState(() {
_isExpanded = !_isExpanded;
_containerColor = _isExpanded ? Colors.red : Colors.blue;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: _toggleContainer,
child: AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
color: _containerColor,
width: _isExpanded ? 200.0 : 100.0,
height: _isExpanded ? 200.0 : 100.0,
),
),
),
);
}
}above will animate the color, height and width of the container automatically as the values are changed below is the output we get from the
Explicit Animations
To create explicit animations in Flutter, we need to use the AnimationController class. The AnimationController class allows us to control the animation's duration, curve, and other properties. Here's an example of how we can use the AnimationController class to create a simple animation:
If you notice we extend the state of our statefulwidget with TickerProviderStateMixin this will help the ui to get notify when the frames are changed and help us create the animation controller.
Next we create to variables and intialize them in initState and then we attach a listener to update the ui when the animation value changed
late AnimationController _controller;
late Animation<double> _animation;
//...
//...
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween<double>(begin: 0, end: 100).animate(_controller);
_controller.addListener(() {
setState(() {
// to rebuild UI
});
});finally to use the _animation.value in the ui to reflect the changes
below is the full code demoing the Explicit animation using AnimationController
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween<double>(begin: 0, end: 100).animate(_controller);
_controller.addListener(() {
setState(() {
// to rebuild UI
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
_controller.forward();
},
child: Transform.rotate(
angle: pi * _animation.value,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}In the example we take a container with fixed height and width and then we rotate it based on the _animation.value we can see the demo below illustrates the output the code.
Hero Animations
To create hero animations in Flutter, we need to use the Hero widget. Here's an example of how to use the Hero widget to create a hero animation:
In the below code we took two widgets ScreenA and ScreenB both widgets has an element named Hero which a flutter widget provides us the hero animation only thing we need to keep in mind is the tag which has to be matched between the two screen to make the animation possible.
class ScreenA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => ScreenB()),
);
},
child: Hero(
tag: 'image',
child: Image.network(
'https://picsum.photos/200',
width: 200,
height: 200,
),
),
),
),
);
}
}
class ScreenB extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => ScreenA()),
);
},
child: Hero(
tag: 'image',
child: AspectRatio(
aspectRatio: 16/9,
child: Image.network(
'https://picsum.photos/200',
fit: BoxFit.cover,
),
),
),
),
);
}
}In above example we took an image of fixed size and when user taps on the image we navigate to the new screen with an image of aspect ration 16/9 which will be of full width of the screen and as we are wrapping it in Hero widget the transition between the screens will will be animating the image between the screens below the illustration of the above code
Custom Animations
In flutter Custom Animations are similar to the Explicit animations where we use AnimationController and Animation to create and control the animation on the screen
Conclusion
Animations will enhance the user experience in our application, making it more engaging and enjoyable. Whether we use implicit animations, explicit animations, hero animations, or custom animations, Flutter provides powerful tools to create stunning animations that bring our app to life.
In this article, we covered the basics of Flutter animations on how to create various animations. Now, it’s time for you to explore and experiment with different types of animations in your Flutter app. Happy animating!
We also have multiple animation flutter available in the flutter which we can use head to pub.dev and check.
Thanks for your time.
Hope you like it, if yes clap & share.
