Flutter Implicit Animations - Nerd Platoon Flutter Implicit Animations - Nerd Platoon

Animations plays a significant part in any mobile applications’s user experience. Animations in Flutter are pretty straightforward and can be achieved with significantly less effort. Normally, it is achieved using Animation and AnimationController in Flutter. But, there are also built-in widgets, that could animate the UI just by changing its values.

Implicit Animated Widgets do not rebuild itself on UI load, but rebuilds each time the its values changes. It makes use of its own inner AnimationController to do the animations. These widgets are easy to utilize and you do not have to deal with the AnimationController yourself. One can alter the animation using the duration and curve properties of the widget.

Duration refers to the time the widget should be animated. It could be microseconds, milliseconds, , seconds, minutes, hours and even days. It is the required property.

Curve is the way the the widget should animate. You can choose any type of curve you prefer.

 

Common Implicitly Animated Widgets:

 

  • AnimatedContainer

As the name suggests, the AnimatedContainer animates the widget as per its width, height, color and some other parameters changes. It can be used in the place of Tweens Animation


AnimatedContainer(
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10),
),
duration: Duration(milliseconds:600),
curve: Curves.easeInToLinear,
),

Update the state of the widget as:

floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
width = width ==300? 250: 300;
height = height==250? 300: 250;
color = color == Colors.orange ? Colors.indigo[300]: Colors.orange;
});
},
child: Icon(Icons.add,color: Colors.black,),
),

  • AnimatedOpacity

AnimatedOpacity animates the updates in the opacity of the widget. The opacity ranges from 0 to 1; 0 means transparent and 1 means completely visible.


AnimatedOpacity(
child: Container(
width: width,
height: height,
),
opacity: opacity,
duration: Duration(milliseconds:600),
curve: Curves.easeInToLinear,
),

  • AnimatedCrossFade

The AnimatedCrossFade widget switches between two widgets by applying the fade transition. It automatically transits from one size to another if the children are of different sizes.
AnimatedCrossFade(
firstChild: Container(
width: 350,
height: 250,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
secondChild: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(80),
),
),
crossFadeState: state,
duration: Duration(seconds:1),
firstCurve: Curves.easeInToLinear,
secondCurve: Curves.easeInToLinear,
sizeCurve: Curves.bounceOut,
),

floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
state = state == CrossFadeState.showFirst ? CrossFadeState.showSecond:CrossFadeState.showFirst;
});
},
child: Icon(Icons.add,color: Colors.black,),
),

There are still some more Implicitly Animated Widgets like AnimatedIcon, AnimatedList, AnimatedAlign, AnimatedPadding, AnimatedPositioned etc.