Flutter AnimatedIcon Example

Flutter has an AnimatedIcon class as well as Icons that can be animated. This guide will show how to use AnimatedIcon and I’ll follow up with a post on animating icons. The full code and a github link are at the bottom.

The Animated icon class only supports the following icon animations. For anything else you will need to animate your own icon. The AnimatedIcon will give better transitions but the side effect is the limited choice.

.The basic code looks like this:

  AnimatedIcon(
    progress: _acForIcon,
    icon: AnimatedIcons.pause_play,
    size: 88,
  ),

Where the hard part is the progress property that requires an animation. If you have not used animations before they do require some setup. If you have used them a lot and will continue to use them a lot I recommend reading this post on extending state.

Here is the full code to set it up.

import 'package:flutter/material.dart';

import 'all_example.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AnimatedIcon Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SampleAppMainPage(title: 'AnimatedIcon Home Page'),
    );
  }
}

class SampleAppMainPage extends StatefulWidget {
  const SampleAppMainPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<SampleAppMainPage> createState() => _SampleAppMainPageState();
}

class _SampleAppMainPageState extends State<SampleAppMainPage>
    with SingleTickerProviderStateMixin {
  bool firstIconShowing = true;
  late AnimationController _acForIcon;

  @override
  void initState() {
    super.initState();
    _acForIcon = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 450));
  }

  @override
  void dispose() {
    _acForIcon.dispose();
    super.dispose();
  }

  void _switch() {
    setState(() {
      firstIconShowing ? _acForIcon.forward() : _acForIcon.reverse();
      firstIconShowing = !firstIconShowing;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Column(children: [
          AnimatedIcon(
            progress: _acForIcon,
            icon: AnimatedIcons.pause_play,
            size: 88,
          ),
          ElevatedButton(onPressed: _switch, child: const Text("Animate")),
          ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const AllIconsSample()),
                );
              },
              child: const Text("Show All"))
        ])));
  }
}

Take not that it does need to be disposed and will need to include the SingleTickerProviderStateMixin.

The Github link has a full example that can be run from an IDE or command line.