Flutter: AnimationController examples

Last updated on September 10, 2021 A Goodman Loading... Post a comment

This article walks you through 3 examples of using AnimationController in Flutter.

Example 1: Simple scaling box

This example shows you how to use AnimationController in the simplest way.

Note: AnimationController linearly produces the numbers from 0.0 to 1.0 during a given duration by default.

Example preview:

The full code:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

// This class goes with TickerProviderStateMixin so that AnimationControllers can be created with "vsync: this"
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;

  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(seconds: 3), vsync: this);
    _controller.repeat(reverse: true);
  }

  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext _, child) {
            return Transform.scale(
              scale: _controller.value,
              child: child,
            );
          },
          child: Container(
            width: 300,
            height: 200,
            color: Colors.deepOrange,
          ),
        ),
      ),
    );
  }
}

Example 2: Color Animation

Preview:

The full code:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

// This class goes with TickerProviderStateMixin so that AnimationControllers can be created with "vsync: this"
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorTween;

  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(seconds: 3), vsync: this);
    _controller.repeat(reverse: true);

    _colorTween = ColorTween(begin: Colors.deepOrange, end: Colors.deepPurple)
        .animate(_controller);
  }

  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _colorTween,
          builder: (BuildContext _, Widget? __) {
            return Container(
              width: 300,
              height: 300,
              color: _colorTween.value,
            );
          },
        ),
      ),
    );
  }
}

Example 3: A little bit more complicated

Preview:

The code:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

// This class goes with TickerProviderStateMixin so that AnimationControllers can be created with "vsync: this"
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Decoration> _decorationTween;

  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(seconds: 5), vsync: this);
    _controller.repeat(reverse: true);

    _decorationTween = DecorationTween(
            begin: BoxDecoration(
                color: Colors.blue,
                border: Border.all(width: 30, color: Colors.red),
                borderRadius: BorderRadius.circular(10)),
            end: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(width: 1, color: Colors.black),
                borderRadius: BorderRadius.circular(150)))
        .animate(_controller);
  }

  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
        child: DecoratedBoxTransition(
            decoration: _decorationTween,
            child: Container(
              width: 300,
              height: 300,
            )),
      ),
    );
  }
}

Wrapping Up

We’ve examined more than one example of creating animations with AnimationController in Flutter. From now on, you can make more complex and advanced effects without using any third-party packages. If you’d like to explore more new and interesting things in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles