Flutter Tutorials – Animated Container – Animate a widget in Flutter

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

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;
    });
}

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.

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;
    });
}

AnimatedOpacity

Animate the opacity.

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;
    });
}

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

Complete Source Code

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();
              },
            ),
          ],
        ),
      ),
    );
  }
}