#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
1import 'package:flutter/material.dart';23void main() {4runApp(FadeAnimationApp());5}67// A simple fade animation using AnimatedOpacity widget8class FadeAnimationApp extends StatefulWidget {9@override10_FadeAnimationAppState createState() => _FadeAnimationAppState();11}1213class _FadeAnimationAppState extends State<FadeAnimationApp> {14double _opacity = 1.0;1516// Method to toggle opacity17void _toggleOpacity() {18setState(() {19_opacity = _opacity == 1.0 ? 0.0 : 1.0;20});21}2223@override24Widget build(BuildContext context) {25return MaterialApp(26home: Scaffold(27appBar: AppBar(title: Text('Fade Animation Example')),28body: Center(29child: AnimatedOpacity(30opacity: _opacity,31duration: Duration(seconds: 2), // Animation duration32child: Text('Fading Text', style: TextStyle(fontSize: 30)),33),34),35floatingActionButton: FloatingActionButton(36onPressed: _toggleOpacity, // Triggering the fade animation37child: 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