Icon
Get In Touch
#flutter

Animations in Flutter

Animations enhance user experience by providing smooth transitions. Flutter makes it easy to add both simple and complex animations to your apps.

Types of Animations

01. Implicit Animations: Animate a property between values, like a fade or a slide.
02. Explicit Animations: More control over animation timing and direction, such as animating custom widgets.

Fade Animation

1
import 'package:flutter/material.dart';
2
3
void main() {
4
runApp(FadeAnimationApp());
5
}
6
7
// A simple fade animation using AnimatedOpacity widget
8
class FadeAnimationApp extends StatefulWidget {
9
@override
10
_FadeAnimationAppState createState() => _FadeAnimationAppState();
11
}
12
13
class _FadeAnimationAppState extends State<FadeAnimationApp> {
14
double _opacity = 1.0;
15
16
// Method to toggle opacity
17
void _toggleOpacity() {
18
setState(() {
19
_opacity = _opacity == 1.0 ? 0.0 : 1.0;
20
});
21
}
22
23
@override
24
Widget build(BuildContext context) {
25
return MaterialApp(
26
home: Scaffold(
27
appBar: AppBar(title: Text('Fade Animation Example')),
28
body: Center(
29
child: AnimatedOpacity(
30
opacity: _opacity,
31
duration: Duration(seconds: 2), // Animation duration
32
child: Text('Fading Text', style: TextStyle(fontSize: 30)),
33
),
34
),
35
floatingActionButton: FloatingActionButton(
36
onPressed: _toggleOpacity, // Triggering the fade animation
37
child: Icon(Icons.refresh),
38
),
39
),
40
);
41
}
42
}

Key Takeaways

- Use AnimatedOpacity for simple fade animations.
- Control animation duration and effects easily with Flutter animation widgets.

©2024 Codeblockz

Privacy Policy