Using AnimatedIcon in Flutter

Last updated on February 22, 2021 A Goodman Loading... Post a comment

There are cases where you will want an icon that can change its own appearance like a play/pause button for a video or audio, a button to close/open a menu, etc. Luckily, you can achieve your goal with a few lines of code by using AnimatedIcon.

A Full Example

Preview:

This example demonstrates an animated play/pause button.

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(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  bool _isPlay = false;
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
    super.initState();
  }

  // Dispose the controller
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              if (_isPlay == false) {
                _controller.forward();
                _isPlay = true;
              } else {
                _controller.reverse();
                _isPlay = false;
              }
            },
            child: AnimatedIcon(
              icon: AnimatedIcons.play_pause,
              progress: _controller,
              size: 200,
              color: Colors.blue,
            ),
          ),
        ));
  }
}

API and Available Animated Icons

Constructor

AnimatedIcon({
    Key key, 
    @required AnimatedIconData icon, 
    @required Animation<double> progress, 
    Color color, double size, 
    String semanticLabel, 
    TextDirection textDirection
})

Parameters

The following table listed the most-used parameters of the AnimatedIcon widget:

ParameterTypeDescription
icon (required)AnimatedIconDataDetermine the icon that will be displayed.
progress (required)Animation<double>The animation progress
colorColorThe color of the icon
sizedoubleSizing the icon

All Available Animated Icons

Currently, Flutter provides directly a set of 14 animated icons as shown below:

Conclusion

We have walked through a complete example and the fundamental of the AnimatedIcon widget. At this point, you should get a better sense when using it in your applications.

If you would like to explore more exciting things about Flutter, give a look at the following articles: Example of sortable DataTable in FlutterFlutter: Scrolling to a desired Item in a ListViewHow to use Cupertino icons in FlutterExample of CupertinoSliverNavigationBar in Flutter.

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles