Comments
2 min
Flutter Animation Series Part 2 - Implicit Animations
Welcome to Animation Series Part 2, where we’ll dive into Implicit Animations in Flutter! Building on the foundational concepts from Part 1, this section focuses on the simpler, more intuitive approach to animations that Flutter provides.
Introduction
Welcome to Animation Series Part 2, where we’ll dive into Implicit Animations in Flutter! Building on the foundational concepts from Part 1, this section focuses on the simpler, more intuitive approach to animations that Flutter provides.
By the end of this part, you’ll have a solid understanding of how to leverage implicit animations to enhance your Flutter apps. Let’s get started!
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