Animatedfab

animatedfab.dart

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

class AnimatedFAB extends StatefulWidget {
  const AnimatedFAB({Key key, this.icon, this.color, this.items})
      : super(key: key);
  final Color color;
  final Widget icon;
  final List<SecondaryButtonParams> items;

  @override
  _AnimatedFABState createState() => _AnimatedFABState();
}

class _AnimatedFABState extends State<AnimatedFAB> {
  bool _isCollapsed = true;

  void openButton() {
    setState(() {
      _isCollapsed = false;
    });
  }

  void closeButton() {
    setState(() {
      _isCollapsed = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 200),
          transitionBuilder: (Widget child, Animation<double> animation) {
            if (_isCollapsed) {
              return FadeTransition(
                opacity: animation,
                child: SlideTransition(
                  position: Tween<Offset>(
                          begin: const Offset(0, 0.5), end: Offset.zero)
                      .animate(animation),
                  child: child,
                ),
              );
            } else {
              return FadeTransition(
                opacity: animation,
                child: SlideTransition(
                  position: Tween<Offset>(
                          begin: const Offset(0, 0.6), end: Offset.zero)
                      .animate(animation),
                  child: child,
                ),
              );
            }
          },
          child: _isCollapsed
              ? const SizedBox()
              : Column(
                  mainAxisSize: MainAxisSize.min,
                  children: widget.items.map(buildSecondaryButtons).toList(),
                ),
        ),
        RectangularIconButton(
          onPress: () {
            _isCollapsed ? openButton() : closeButton();
          },
          icon: const Icon(Icons.add, size: 32),
          toolTip: "",
        ),
      ],
    );
  }

  Widget buildSecondaryButtons(SecondaryButtonParams params) {
    return InkWell(
      onTap: () {
        if (params.onTap != null) params.onTap.call();
        closeButton();
      },
      child: Padding(
        padding: const EdgeInsets.only(bottom: 10),
        child: Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Theme.of(context).accentColor,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Icon(params.icon),
        ),
      ),
    );
  }
}

class SecondaryButtonParams {
  SecondaryButtonParams({
    this.icon,
    this.onTap,
  });

  final IconData icon;
  final VoidCallback onTap;
}