In this blog, we are going to learn about Implicit Animation In Flutter. We don’t need to write code for basic animation, we can achieve animation by changing some property values of widgets.
Using implicit animations, you can animate a widget property by setting a target value. When we setState in StatefulWidget then new target values, like color, width, height, and, etc. changes with a specified duration from the old value to the new value.
1. AnimatedOpacity: We can hide and show widgets using opacity. Its value lies between 0 (no visibility) and 1 (visible).
2.AnimatedCrossFade: Replace one widget with another and animates itself between sizes.
3.AnimatedPositioned: It is used to change the position of the widget to a new position with a specified duration,
4.AnimatedContainer: We can animate properties like width, height, background colors, etc.
Let’s check implementations of AnimatedContainer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import 'dart:math'; import 'package:flutter/material.dart'; void main() => runApp(AnimatedContainerApp()); class AnimatedContainerApp extends StatefulWidget { @override _AnimatedContainerAppState createState() => _AnimatedContainerAppState(); } class _AnimatedContainerAppState extends State<AnimatedContainerApp> { // Define the various properties with default values. Update these properties // when the user taps a FloatingActionButton. double _width = 50; double _height = 50; Color _color = Colors.green; BorderRadiusGeometry _borderRadius = BorderRadius.circular(8); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('AnimatedContainer Demo'), ), body: Center( child: AnimatedContainer( // Use the properties stored in the State class. width: _width, height: _height, decoration: BoxDecoration( color: _color, borderRadius: _borderRadius, ), // Define how long the animation should take. duration: Duration(seconds: 1), // Provide an optional curve to make the animation feel smoother. curve: Curves.fastOutSlowIn, ), ), floatingActionButton: FloatingActionButton( // When the user taps the button onPressed: () { // Use setState to rebuild the widget with new values. setState(() { // Create a random number generator. final random = Random(); // Generate a random width and height. _width = random.nextInt(300).toDouble(); _height = random.nextInt(300).toDouble(); // Generate a random color. _color = Color.fromRGBO( random.nextInt(256), random.nextInt(256), random.nextInt(256), 1, ); // Generate a random border radius. _borderRadius = BorderRadius.circular(random.nextInt(100).toDouble()); }); }, child: Icon(Icons.play_arrow), ), ), ); } } |
Let’s check the final result of the code.
I hope this blog will help to add animation to your widgets.
Happy Learning 🙂
Reference Links :
https://flutter.dev/docs/cookbook/animation/animated-container
Be the first to comment.