Flutter: Creating an add_close AnimatedIcons

So I had some free time and this is something many people might want to use at some point as we do not have much options for AnimatedIcons that are already given to us. So I went ahead and built this small package and uploaded it on pub dart that solves what you are looking for. With this package you can animate any two icons.

Check on pub dart animate_icons

Simply add the package into pubspec.yaml like this:

animate_icons:

Then use this Widget like this:

AnimateIcons(
    startIcon: Icons.add,
    endIcon: Icons.close,
    size: 60.0,
    onStartIconPress: () {
        print("Clicked on Add Icon");
    },
    onEndIconPress: () {
        print("Clicked on Close Icon");
    },
    duration: Duration(milliseconds: 500),
    color: Theme.of(context).primaryColor,
    clockwise: false,
),

Yes, friend, you need to create your own animation

I have written code for the situation that you talked about

I used to Transform widget , and AnimationController

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController animatedController;
  double _angle = 0;

  @override
  void initState() {
    animatedController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    animatedController.addListener(() {
      setState(() {
        _angle = animatedController.value * 45 / 360 * pi * 2;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: InkResponse(
        onTap: () {
          if (animatedController.status == AnimationStatus.completed)
            animatedController.reverse();
          else if (animatedController.status == AnimationStatus.dismissed)
            animatedController.forward();
        },
        child: Transform.rotate(
          angle: _angle,
          child: Icon(
            Icons.add,
            size: 50,
          ),
        ),
      ),
    )));
  }
}

If you need to customize more than this, Take a look at the AnimatedContainer

if the simple transition between the two icons is enough, then simple_animated_icon package might be useful.

class AnimatedIconButton extends StatefulWidget {
  @override
  _AnimatedIconButtonState createState() => _AnimatedIconButtonState();
}

class _AnimatedIconButtonState extends State<AnimatedIconButton>
    with SingleTickerProviderStateMixin {
  bool _isOpened = false;
  AnimationController _animationController;
  Animation<double> _progress;

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

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300))
          ..addListener(() {
            setState(() {});
          });

    _progress =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
  }

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

  void animate() {
    if (_isOpened) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }

    setState(() {
      _isOpened = !_isOpened;
    });
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
        onPressed: animate,
        icon: SimpleAnimatedIcon(
          startIcon: Icons.add,
          endIcon: Icons.close,
          progress: _progress,
        ));
  }
}