Flutter Tutorials – Animated Container – Animate a widget in Flutter

By | January 31, 2019

Article shows how to use Animated Containers in Flutter.
AnimatedContainer are used for Implicit animations in Flutter.

Here we will be investigating AnimatedContainer, AnimatedCrossFade and AnimatedOpacity.

 
Watch Video Tutorial
 

 
AnimatedContainer
 
This by default uses Linear Interpolation to transition to the new values.
Specify the duration to

[java]
var _color = Colors.red;
var _height = 100.0;
var _width = 100.0;

AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.bounceIn,
color: _color,
height: _height,
width: _width,
),

….

// Call this method to animate.

animateContainer() {
setState(() {
_color = _color == Colors.red ? Colors.green : Colors.red;
_height = _height == 100 ? 200 : 100;
_width = _width == 100 ? 200 : 100;
});
}
[/java]

AnimatedCrossFade

Here we will animate between two images, which is supplied to the ‘firstChild‘ and ‘secondChild‘ property of the AnimatedCrossFade widget. ‘crossFadeState‘ is another required property where you can use CrossFadeState.showFirst and CrossFadeState.showSecond to toggle between the two widgets.

[java]
var _isFirstCrossFadeEnabled = false;

AnimatedCrossFade(
duration: Duration(milliseconds: 3000),
firstChild: Container(
child: Image.asset("images/apple.png"),
height: 200.0,
width: 200.0,
),
secondChild: Container(
child: Image.asset("images/android.png"),
height: 200.0,
width: 200.0,
),
crossFadeState: _isFirstCrossFadeEnabled
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
),
….

// Call this method to animate.

animateCrossFade() {
setState(() {
_isFirstCrossFadeEnabled = !_isFirstCrossFadeEnabled;
});
}
[/java]

AnimatedOpacity

Animate the opacity.

[java]
var _opacity = 0.0;

AnimatedOpacity(
opacity: _opacity,
duration: Duration(seconds: 2),
child: FlutterLogo(
size: 200.0,
),
),
….

// Call this method to animate.

animateOpacity() {
setState(() {
_opacity = _opacity == 0 ? 1.0 : 0.0;
});
}
[/java]

 
That’s it. Watch the video tutorial to see the demo of the app.
 
 

Complete Source Code

[java]
import ‘package:flutter/material.dart’;

class AnimatedDemo extends StatefulWidget {
AnimatedDemo() : super();

final String title = "Animated Demo";

@override
AnimatedDemoState createState() => AnimatedDemoState();
}

class AnimatedDemoState extends State<AnimatedDemo> {
//
var _color = Colors.red;
var _height = 100.0;
var _width = 100.0;
var _isFirstCrossFadeEnabled = false;
var _opacity = 0.0;

animateContainer() {
setState(() {
_color = _color == Colors.red ? Colors.green : Colors.red;
_height = _height == 100 ? 200 : 100;
_width = _width == 100 ? 200 : 100;
});
}

animateCrossFade() {
setState(() {
_isFirstCrossFadeEnabled = !_isFirstCrossFadeEnabled;
});
}

animateOpacity() {
setState(() {
_opacity = _opacity == 0 ? 1.0 : 0.0;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(20.0),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.bounceIn,
color: _color,
height: _height,
width: _width,
),
OutlineButton(
child: Text("Animate Container"),
onPressed: () {
animateContainer();
},
),
AnimatedCrossFade(
duration: Duration(milliseconds: 3000),
firstChild: Container(
child: Image.asset("images/apple.png"),
height: 200.0,
width: 200.0,
),
secondChild: Container(
child: Image.asset("images/android.png"),
height: 200.0,
width: 200.0,
),
crossFadeState: _isFirstCrossFadeEnabled
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
),
OutlineButton(
child: Text("Animate CrossFade"),
onPressed: () {
animateCrossFade();
},
),
AnimatedOpacity(
opacity: _opacity,
duration: Duration(seconds: 2),
child: FlutterLogo(
size: 200.0,
),
),
OutlineButton(
child: Text("Animate Opacity"),
onPressed: () {
animateOpacity();
},
),
],
),
),
);
}
}
[/java]

Leave a Reply

Your email address will not be published. Required fields are marked *