AnimatedIcon

main.dart

import 'package:flutter_web/material.dart';
import 'package:flutter_web_test/flutter_web_test.dart';
import 'package:flutter_web_ui/ui.dart' as ui;

Map<String, AnimatedIconData> _icons = {
  'add_event': AnimatedIcons.add_event,
  'arrow_menu': AnimatedIcons.arrow_menu,
  'close_menu': AnimatedIcons.close_menu,
  'event_add': AnimatedIcons.event_add,
  'home_menu': AnimatedIcons.home_menu,
  'list_view': AnimatedIcons.list_view,
  'menu_arrow': AnimatedIcons.menu_arrow,
  'menu_close': AnimatedIcons.menu_close,
  'menu_home': AnimatedIcons.menu_home,
  'pause_play': AnimatedIcons.pause_play,
  'play_pause': AnimatedIcons.play_pause,
  'search_ellipsis': AnimatedIcons.search_ellipsis,
  'view_list': AnimatedIcons.view_list,
};

class AnimatedIconsDemo extends StatefulWidget {
  static String routeName = '/animated_icon';

  _AnimatedIconsDemoState createState() => _AnimatedIconsDemoState();
}

class _AnimatedIconsDemoState extends State<AnimatedIconsDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  void initState() {
    controller =
        AnimationController(duration: Duration(milliseconds: 300), vsync: this);
    super.initState();
  }

  void toggle() {
    var status = controller.status;
    if (status == AnimationStatus.forward ||
        status == AnimationStatus.completed) {
      controller.reverse();
    } else {
      controller.forward();
    }
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Icons')),
      body: GridView.count(
        crossAxisCount: 2,
        children: [
          ..._icons.keys.map((label) => IconLabelView(
                label: label,
                icon: _icons[label],
                controller: controller,
                onTapped: () => toggle(),
              ))
        ],
      ),
    );
  }
}

class IconLabelView extends StatelessWidget {
  final AnimatedIconData icon;
  final String label;
  final AnimationController controller;
  final VoidCallback onTapped;

  IconLabelView({this.icon, this.label, this.controller, this.onTapped});

  Widget build(BuildContext context) {
    return Card(
      child: Container(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              onPressed: onTapped,
              icon: AnimatedIcon(
                color: Theme.of(context).primaryColor,
                icon: icon,
                progress: controller,
              ),
            ),
            Text(label),
          ],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
          child: Container(
          child: AnimatedIconsDemo(),
        ),
      ),
    );
  }
}

Future<void> main() async {
  await ui.webOnlyInitializePlatform();
  runApp(MyApp());
}