Comments
2 min
Flutter Animation Series Part 2 - Implicit Animations
Learning to implement animations in Flutter can feel overwhelming, especially when tutorials mix multiple concepts in one post, making it difficult to keep up. My approach will help you master Flutter animations in a clear and organized way.
Introduction
In this animation series, I'll guide you step by step, taking you from beginner to advanced and complex animations using Flutter.
Learning to implement animations in Flutter can feel overwhelming, especially when tutorials mix multiple concepts in one post, making it difficult to keep up. My approach will help you master Flutter animations in a clear and organized way.
Implicit Animations
This is the most basic and simplest approach to animate any element. It involves;
- Identifying a widget and its corresponding animated widget. Some examples include:
- Container - AnimatedContainer
- Opacity - AnimatedOpacity
- Positioned - AnimatedPositioned, etc
- Modifying a property of the animated widget. Typically, the
durationparameter is required, which specifies how long the animation will take to complete. - Set a variable that will be used to rebuild the widget, which in turn triggers the animation. The rebuild can be easily triggered by using setState
- Create a tenary condition for the property of the widget you want to update, it could be color, opacity, offset,etc
- Finally, add a button that will update the variable. When
setStateis called, the widget will rebuild, and the animation will be triggered.
Demo #1
I want to update the color of a Box from red to blue;
Here are my steps
- Step 1 : Identify the widget I could use, in my case I will use a Container widget. Its corresponding animated widget is AnimatedContainer. Don't forget the duration parameter.
demo_1.dart
AnimatedContainer(
height: 300,
width: 200,
duration:const Duration(milliseconds:500)
)- Step 2: Find the property I want to modify which is the color property
demo_1.dart
AnimatedContainer(
height: 300,
width: 200,
color: Colors.red,
duration:const Duration(milliseconds:500)
)- Step 3: Create a variable to change the color
demo_1.dart
class Demo1 extends StatefulWidget {
const Demo1({super.key});
@override
State<Demo1> createState() => _Demo1State();
}
class _Demo1State extends State<Demo1> {
//This variable will be used to change the
bool isRed = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
AnimatedContainer(
duration:const Duration(milliseconds:500)
height: 300,
width: 200,
color: Colors.red,
duration:const Duration(milliseconds:500)
),
],
),
);
}
}
- Step 4: Set a tenary operator to toggle the state
demo_1.dart
class Demo1 extends StatefulWidget {
const Demo1({super.key});
@override
State<Demo1> createState() => _Demo1State();
}
class _Demo1State extends State<Demo1> {
//This variable will be used to change the
bool isRed = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
AnimatedContainer(
height: 300,
width: 200,
color:isRed ? Colors.red:Colors.blue,
duration:const Duration(milliseconds:500)
),
],
),
);
}
}
- Step 5: Add a toggle button to animate your widget manually
class Demo1 extends StatefulWidget {
const Demo1({super.key});
@override
State<Demo1> createState() => _Demo1State();
}
class _Demo1State extends State<Demo1> {
//This variable will be used to change the
bool isRed = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
AnimatedContainer(
height: 300,
width: 200,
color:isRed ? Colors.red:Colors.blue,
duration:const Duration(milliseconds:500)
),
SizedBox(height:20),
ElevatedButton(
onPressed: () {
setState(() => isRed = !isRed);
},
child: const Text("Animate"),
),
],
),
);
}
}
Some Tips:
- To animate a button from blue to red when the screen appears, start by setting the button's initial color to blue. Then, use the
initStatemethod to trigger the color change. - In Flutter, the
buildmethod is called wheneversetStateis invoked. For more precise control over state changes, consider using state management libraries. - Remember, the goal of animation is to enhance the user experience with smooth transitions. Keep your animations simple yet engaging.
Comments