Using Implicit Animations
1. Understanding Implicit Animations
Implicit animations in Flutter are a way to animate widget properties automatically when their values change. They provide a simpler and more declarative approach compared to explicit animations using AnimationController.
| Property | Description | Values |
|---|---|---|
| duration | Duration of the animation | Duration(milliseconds: 300) |
| curve | Easing curve for the animation | Curves.easeInOut |
Example: Basic Implicit Animation
<AnimatedContainer
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text('Hello'),
),
)>
Note: Implicit animations are ideal for simple state changes like size, color, or position adjustments.
2. Using AnimatedContainer Widget
| Property | Values | Description |
|---|---|---|
| duration | Duration |
Duration of the animation. Defaults to 300ms. |
| curve | Curve |
The curve to use for the animation. Defaults to Curves.easeInOut. |
| child | Widget |
The child widget to be animated. |
| width | double? |
The width of the container to animate to. |
| height | double? |
The height of the container to animate to. |
| padding | EdgeInsets? |
The padding of the container to animate to. |
| margin | EdgeInsets? |
The margin of the container to animate to. |
| decoration | Decoration? |
The decoration of the container to animate to. |
| alignment | AlignmentGeometry? |
The alignment of the child within the container to animate to. |
Example: Basic AnimatedContainer
class AnimatedContainerExample extends StatefulWidget {
@override
_AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}
class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
double _width = 100;
double _height = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AnimatedContainer Example')),
body: Center(
child: AnimatedContainer(
width: _width,
height: _height,
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text('Animated Container'),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_width = _width == 100 ? 200 : 100;
_height = _height == 100 ? 200 : 100;
});
},
child: Icon(Icons.refresh),
),
);
}
}3. Using AnimatedOpacity Widget
| Property | Values | Description |
|---|---|---|
| opacity | double |
The opacity level of the widget (0.0 = fully transparent, 1.0 = fully opaque) |
| child | Widget |
The widget to be animated |
| duration | Duration |
The duration of the animation (default is 300ms) |
| curve | Curve |
The curve to use for the animation (default is Curves.easeInOut) |
Example: AnimatedOpacity Widget
AnimatedOpacity(
duration: Duration(seconds: 1),
opacity: 0.5,
child: Text('This text fades in and out'),
)
Note: The
AnimatedOpacity widget animates the opacity of its child, allowing for smooth transitions between visible and invisible states.
4. Using AnimatedPadding Widget
The AnimatedPadding widget is a convenient way to animate padding changes in Flutter. It automatically interpolates between the old and new padding values over a specified duration.
| Property | Description | Values |
|---|---|---|
| child | The widget to which padding is applied. | Widget |
| padding | The padding to animate to. | EdgeInsets |
| duration | The duration of the animation. | Duration (default: 300ms) |
| curve | The animation curve to use. | Curve (default: Curves.easeInOut) |
Example: AnimatedPadding Usage
<AnimatedPadding
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
padding: EdgeInsets.all(20),
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
/>
Note:
AnimatedPadding is useful for animating layout changes without needing to manage the animation state manually.
5. Using AnimatedPositioned Widget
The AnimatedPositioned widget is a powerful tool for animating the position of a child widget within a Stack. It allows you to animate properties like left, right, top, and bottom with a smooth transition.
| Property | Description | Values | Notes |
|---|---|---|---|
| child | The widget to be animated | Widget |
Required |
| left | Distance from the left edge of the stack | double? |
Animates from previous value to new value |
| right | Distance from the right edge of the stack | double? |
Animates from previous value to new value |
| top | Distance from the top edge of the stack | double? |
Animates from previous value to new value |
| bottom | Distance from the bottom edge of the stack | double? |
Animates from previous value to new value |
| width | Width of the widget | double? |
Animates from previous value to new value |
| height | Height of the widget | double? |
Animates from previous value to new value |
| duration | Duration of the animation | Duration |
Defaults to Duration(milliseconds: 300) |
| curve | The curve to use for the animation | Curve |
Defaults to CurvedAnimation with Curves.easeInOut |
Example: Basic AnimatedPositioned Usage
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("AnimatedPositioned Example")),
body: Center(
child: AnimatedPositioned(
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
left: 50.0,
top: 50.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
),
),
),
);
}
}Example: AnimatedPositioned with Toggle
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isAnimated = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("AnimatedPositioned Toggle")),
body: Center(
child: Stack(
children: [
AnimatedPositioned(
duration: Duration(seconds: 1),
left: isAnimated ? 150.0 : 50.0,
top: isAnimated ? 150.0 : 50.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
isAnimated = !isAnimated;
});
},
child: Icon(Icons.play_arrow),
),
),
);
}
}6. Using AnimatedAlign Widget
| Property | Values | Description |
|---|---|---|
| child | Widget |
The widget to align and animate. |
| alignment | AlignmentGeometry |
The alignment to animate to. |
| duration | Duration |
The duration of the animation. |
| curve | Curve |
The curve to use for the animation. |
Example: AnimatedAlign Usage
AnimatedAlign(
alignment: Alignment.center,
duration: Duration(seconds: 1),
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
)
Note: The
AnimatedAlign widget is useful for animating the alignment of a child widget over time.
7. Using AnimatedDefaultTextStyle Widget
The AnimatedDefaultTextStyle widget in Flutter is used to animate changes to the default text style properties of its descendants. It allows you to smoothly transition between different text styles, such as font size, color, or weight, without needing to manually manage the animation state.
| Property | Description | Values |
|---|---|---|
| child | The widget below this widget in the tree. | Widget |
| style | The new text style to animate to. | TextStyle |
| duration | The duration of the animation. | Duration |
| curve | The curve to use for the animation. | Curve (default: Curves.easeInOut) |
Example: Using AnimatedDefaultTextStyle
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("AnimatedDefaultTextStyle Example")),
body: Center(
child: AnimatedDefaultTextStyle(
style: TextStyle(fontSize: 24, color: Colors.blue),
duration: Duration(seconds: 1),
child: Text("Hello, Flutter!"),
),
),
),
);
}
}
Note: The
AnimatedDefaultTextStyle widget only animates the style properties of its descendants. It does not animate the actual text content or other widget properties.
8. Using AnimatedSize Widget
The AnimatedSize widget in Flutter provides a simple way to animate the size of a widget when its content changes. It's particularly useful for dynamic UIs where elements might grow or shrink based on content.
| Property | Description | Default Value |
|---|---|---|
| child | The widget to animate the size of. | Required |
| duration | The duration of the animation. | Duration(milliseconds=300) |
| curve | The curve to use for the animation. | CurvedAnimation with Curves.easeInOut |
| vsync | Used to synchronize animations with the display refresh rate. | Required when using AnimatedBuilder |
Example: Using AnimatedSize
class AnimatedSizeExample extends StatefulWidget {
@override
_AnimatedSizeExampleState createState() => _AnimatedSizeExampleState();
}
class _AnimatedSizeExampleState extends State<AnimatedSizeExample> {
bool _showText = true;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSize(
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
child: _showText
? Text(
"Hello, Flutter!",
style: TextStyle(fontSize: 24),
)
: Container(),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
setState(() {
_showText = !_showText;
});
},
child: Text(_showText ? "Hide" : "Show"),
),
],
);
}
}
Note: The
AnimatedSize widget works best when the size change is predictable. If the content changes in an unpredictable way, consider using AnimatedContainer or custom animations.
Warning: If the
child widget's size changes unexpectedly (e.g., due to layout constraints), the animation might not behave as expected.
9. Using AnimatedScale and AnimatedRotation Widgets
| Property | Values | Description |
|---|---|---|
| child | Widget |
The widget to be animated. |
| duration | Duration |
The duration of the animation. |
| curve | Curve |
The curve to use for the animation. |
| transformAlignment | AlignmentGeometry |
The alignment of the transform origin. |
Example: AnimatedScale
AnimatedScale(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
scale: 1.5,
duration: Duration(seconds: 1),
)Example: AnimatedRotation
AnimatedRotation(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
turns: 0.25,
duration: Duration(seconds: 1),
)10. Using TweenAnimationBuilder Widget
The AnimatedBuilder widget is a powerful tool for creating implicit animations in Flutter. It allows you to define an animation and rebuild a widget tree whenever the animation value changes.
| Property | Description | Example |
|---|---|---|
| animation | The animation object that controls the animation. | AnimationController controller = AnimationController(...); |
| builder | A function that builds the widget tree for each frame of the animation. | (BuildContext context, Widget? child) { return Text('Animated Text'); } |
| child | An optional child widget that is passed to the builder function. | Text('Static Text') |
Example: Basic TweenAnimationBuilder
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TweenAnimationBuilder(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(seconds: 2),
builder: (BuildContext context, double value, Widget? child) {
return Transform.scale(
scale: value,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
},
),
),
),
);
}
}
Note: The
TweenAnimationBuilder is particularly useful for animating properties like size, color, or position without having to manually manage the animation controller.
11. Configuring Animation Duration and Curves
| Property | Values | Description |
|---|---|---|
| duration | Duration |
Specifies the length of the animation in milliseconds. Default is 300ms. |
| curve | Curve |
Determines the pacing of the animation. Default is Curves.easeInOut. |
Example: Custom Duration and Curve
AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.bounceInOut,
width: 100,
height: 100,
color: Colors.blue,
)
Note: The
duration property accepts a Duration object, which can be created using Duration(milliseconds: ...). The curve property accepts any Curve from the Curves class or a custom Curve implementation.