Expandable Fab In Flutter

Expandable Fab In Flutter

Screenshot :

Expandable Fab In Flutter

float-button.dart

import 'dart:math';

import 'package:flutter/material.dart';

class FloatButton extends StatefulWidget {
  @override
  _FloatButtonState createState() => _FloatButtonState();
}

class _FloatButtonState extends State<FloatButton>
    with TickerProviderStateMixin {
  AnimationController _menuButtonController;
  Animation<double> _rotateAnimation;

  AnimationController _moveController;
  Animation<double> _moveAnimation;

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

    _menuButtonController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200));
    _rotateAnimation =
        Tween<double>(begin: 0.0, end: 0.5 * pi).animate(_menuButtonController);

    _moveController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _moveAnimation =
        Tween<double>(begin: 0.0, end: 1.0).animate(_moveController);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Stack(
      children: <Widget>[
        AnimatedBuilder(
          animation: _moveAnimation,
          child: FloatingActionButton(
            backgroundColor: Colors.black45,
            onPressed: () => {},
            child: Icon(Icons.lock),
          ),
          builder: (BuildContext context, Widget child) {
            return Transform(
                alignment: FractionalOffset.center,
                transform:
                    Matrix4.translationValues(-80 * _moveAnimation.value, 0, 0)
                      ..scale(_moveAnimation.value),
                child: child);
          },
        ),
        AnimatedBuilder(
          animation: _moveAnimation,
          child: FloatingActionButton(
            backgroundColor: Colors.black45,
            onPressed: () => {},
            child: Icon(Icons.arrow_back_ios),
          ),
          builder: (BuildContext context, Widget child) {
            return Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4.translationValues(
                    -40 * _moveAnimation.value, 60 * _moveAnimation.value, 0)
                  ..scale(_moveAnimation.value),
                child: child);
          },
        ),
        AnimatedBuilder(
          animation: _moveAnimation,
          child: FloatingActionButton(
            backgroundColor: Colors.black45,
            onPressed: () => {},
            child: Icon(Icons.delete),
          ),
          builder: (BuildContext context, Widget child) {
            return Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4.translationValues(
                    -40 * _moveAnimation.value, -60 * _moveAnimation.value, 0)
                  ..scale(_moveAnimation.value),
                child: child);
          },
        ),
        AnimatedBuilder(
            animation: _rotateAnimation,
            child: FloatingActionButton(
                backgroundColor: Colors.black45,
                onPressed: () => {
                      if (_menuButtonController.isDismissed)
                        {
                          _menuButtonController.forward(),
                          _moveController.forward()
                        }
                      else
                        {
                          _menuButtonController.reverse(),
                          _moveController.reverse()
                        }
                    },
                child: AnimatedIcon(
                  icon: AnimatedIcons.menu_close,
                  progress: _menuButtonController,
                )),
            builder: (BuildContext context, Widget child) {
              return Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4.rotationZ(_rotateAnimation.value),
                child: child,
              );
            }),
      ],
    ));
  }
}

menu.dart

import 'package:flutter/material.dart';

class ParentingAnimationWidget extends StatefulWidget {
  @override
  ParentingAnimationWidgetState createState() =>
      ParentingAnimationWidgetState();
}

class ParentingAnimationWidgetState extends State<ParentingAnimationWidget>
    with TickerProviderStateMixin {
  Animation growingAnimation;
  Animation animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    growingAnimation = Tween(begin: 10.0, end: 100.0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn));
    animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
      parent: controller,
      curve: Curves.easeIn,
    ))
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        }
        if (status == AnimationStatus.dismissed) {
          Navigator.pop(context);
        }
      });
  }

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    controller.forward();
    return AnimatedBuilder(
        animation: controller,
        builder: (BuildContext context, Widget child) {
          return new Scaffold(
              body: new Align(
                  alignment: Alignment.center,
                  child: new Container(
                      child: new Center(
                          child:
                              new ListView(shrinkWrap: true, children: <Widget>[
                    Transform(
                        transform: Matrix4.translationValues(
                            animation.value * width, 0.0, 0.0),
                        child: Center(
                            child: AnimatedBuilder(
                          animation: growingAnimation,
                          builder: (BuildContext context, Widget child) {
                            return new Center(
                                child: Container(
                              height: growingAnimation.value,
                              width: growingAnimation.value * 2,
                              color: Colors.black12,
                            ));
                          },
                        ))),
                    // Transform(
                    //     transform: Matrix4.translationValues(
                    //       animation.value * width,
                    //       0.0,
                    //       0.0,
                    //     ),
                    //     child: new Center(
                    //         child: new Container(
                    //       padding: const EdgeInsets.only(top: 16.0),
                    //       child: Container(
                    //         width: 200.0,
                    //         height: 100.0,
                    //         color: Colors.black12,
                    //       ),
                    //     ))),
                  ])))));
        });
  }
}

main.dart

import 'package:flutter/material.dart';
import 'float-button.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
          child: FloatButton(),
          color: Colors.white,
        ),
      ),
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in