flutter_animated_icons 1.0.0

Collection of 2400+ animations for your icons and buttons. They are implemented by Lottie animation. Effective icon animation tells a clear story amplifying the intended UX.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_animated_icons/icons8.dart';
import 'package:flutter_animated_icons/lottiefiles.dart';
import 'package:flutter_animated_icons/useanimations.dart';
import 'package:lottie/lottie.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Icons',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Animated Icons'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late AnimationController _settingController;
  late AnimationController _favoriteController;
  late AnimationController _menuController;
  late AnimationController _bellController;
  late AnimationController _bookController;

  @override
  void initState() {
    super.initState();

    _settingController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _favoriteController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _menuController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _bellController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1))
          ..repeat();
    _bookController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
  }

  @override
  void dispose() {
    _settingController.dispose();
    _favoriteController.dispose();
    _menuController.dispose();
    _bellController.dispose();
    _bookController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              /// Tap with animation example
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text('Tap'),
                  ),
                  IconButton(
                    splashRadius: 50,
                    iconSize: 100,
                    onPressed: () {
                      _settingController.reset();
                      _settingController.forward();
                    },
                    icon: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Lottie.asset(Icons8.adjust,
                          controller: _settingController),
                    ),
                  ),
                ],
              ),

              /// Toggle example
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text('Toggle'),
                  ),
                  IconButton(
                    splashRadius: 50,
                    iconSize: 100,
                    onPressed: () {
                      if (_favoriteController.status ==
                          AnimationStatus.dismissed) {
                        _favoriteController.reset();
                        _favoriteController.animateTo(0.6);
                      } else {
                        _favoriteController.reverse();
                      }
                    },
                    icon: Lottie.asset(Icons8.heart_color,
                        controller: _favoriteController),
                  ),
                ],
              ),

              /// Hover example
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text('Hover'),
                  ),
                  MouseRegion(
                    onEnter: (event) {
                      _bookController.repeat();
                    },
                    onExit: (event) {
                      _bookController.stop();
                    },
                    child: IconButton(
                      splashRadius: 50,
                      iconSize: 100,
                      onPressed: () {
                        if (_bookController.status ==
                            AnimationStatus.dismissed) {
                          _bookController.reset();
                          _bookController.animateTo(1);
                        } else {
                          _bookController.reverse();
                        }
                      },
                      icon: Lottie.asset(Icons8.book,
                          controller: _bookController,
                          height: 60,
                          fit: BoxFit.fitHeight),
                    ),
                  ),
                ],
              ),

              /// repeat example
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text('Repeat'),
                  ),
                  IconButton(
                    splashRadius: 50,
                    iconSize: 100,
                    onPressed: () {
                      print(_bellController.status);
                      if (_bellController.isAnimating) {
                        // _bellController.stop();
                        _bellController.reset();
                      } else {
                        _bellController.repeat();
                      }
                    },
                    icon: Lottie.asset(LottieFiles.$63128_bell_icon,
                        controller: _bellController,
                        height: 60,
                        fit: BoxFit.cover),
                  ),
                ],
              ),

              /// change color example
              // To change color, goto https://lottiefiles.com/editor
              // original color
              // changed color
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text('Edited animation color\nblack → blue',
                        textAlign: TextAlign.center),
                  ),
                  Row(
                    children: [
                      IconButton(
                        splashRadius: 50,
                        iconSize: 100,
                        onPressed: () {
                          if (_menuController.status ==
                              AnimationStatus.dismissed) {
                            _menuController.reset();
                            _menuController.animateTo(0.6);
                          } else {
                            _menuController.reverse();
                          }
                        },
                        icon: Lottie.asset(Useanimations.menuV3,
                            controller: _menuController,
                            height: 60,
                            fit: BoxFit.fitHeight),
                      ),
                      IconButton(
                        splashRadius: 50,
                        iconSize: 100,
                        onPressed: () {
                          if (_menuController.status ==
                              AnimationStatus.dismissed) {
                            _menuController.reset();
                            _menuController.animateTo(0.6);
                          } else {
                            _menuController.reverse();
                          }
                        },
                        icon: Lottie.asset(Useanimations.menuV3Blue,
                            controller: _menuController,
                            height: 60,
                            fit: BoxFit.fitHeight),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}