Floating Menu In Flutter

Floating Menu In Flutter :

This flutter tutorial post is Floatting Menu In Flutter.

Screenshot :

fab.dart

import 'package:flutter/material.dart';

class FabItem {
  const FabItem(this.title, this.icon, {this.onPress});

  final IconData icon;
  final Function onPress;
  final String title;
}

class FabMenuItem extends StatelessWidget {
  const FabMenuItem(this.item, {Key key}) : super(key: key);

  final FabItem item;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
        shape: StadiumBorder(),
        padding: EdgeInsets.only(top: 8, bottom: 8, left: 24, right: 16),
        color: Colors.white,
        splashColor: Colors.grey.withOpacity(0.1),
        highlightColor: Colors.grey.withOpacity(0.1),
        elevation: 0,
        highlightElevation: 2,
        disabledColor: Colors.white,
        onPressed: item.onPress,
        child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
          Text(item.title),
          SizedBox(width: 8),
          Icon(item.icon, color: Colors.black),
        ]));
  }
}

class ExpandedAnimationFab extends AnimatedWidget {
  const ExpandedAnimationFab({
    @required this.items,
    this.onPress,
    Animation animation,
  }) : super(listenable: animation);

  final List<FabItem> items;
  final Function onPress;

  get _animation => listenable;

  Widget buildItem(BuildContext context, int index) {
    final screenWidth = MediaQuery.of(context).size.width;

    final transform = Matrix4.translationValues(
      -(screenWidth - _animation.value * screenWidth) *
          ((items.length - index) / 4),
      0.0,
      0.0,
    );

    return Align(
        alignment: Alignment.centerRight,
        child: Transform(
            transform: transform,
            child: Opacity(
              opacity: _animation.value,
              child: FabMenuItem(items[index]),
            )));
  }

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          IgnorePointer(
            ignoring: _animation.value == 0,
            child: ListView.separated(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              separatorBuilder: (_, __) => SizedBox(height: 9),
              padding: EdgeInsets.symmetric(vertical: 12),
              itemCount: items.length,
              itemBuilder: buildItem,
            ),
          ),
          FloatingActionButton(
            backgroundColor: Colors.blue,
            child: AnimatedIcon(
              color: Colors.white,
              icon: AnimatedIcons.menu_close,
              progress: _animation,
            ),
            onPressed: onPress,
          )
        ]);
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'fab.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Tutorial',
      theme: ThemeData(primaryColor: Colors.white, accentColor: Colors.grey),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePage createState() => _MyHomePage();
}

class _MyHomePage extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int currentItemIndex = 0;
  Animation<double> _animation;
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 260),
    );

    final curvedAnimation =
        CurvedAnimation(curve: Curves.easeInOut, parent: _controller);
    _animation = Tween<double>(begin: 0, end: 1).animate(curvedAnimation);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('Floatting Menu')),
      floatingActionButton: ExpandedAnimationFab(
        items: [
          FabItem(
            "All",
            Icons.favorite_border,
            onPress: () {
              _controller.reverse();
            },
          ),
          FabItem(
            "Flutter",
            Icons.favorite_border,
            onPress: () {
              _controller.reverse();
            },
          ),
          FabItem(
            "Android",
            Icons.favorite_border,
            onPress: () {
              _controller.reverse();
            },
          ),
          FabItem(
            "PHP",
            Icons.favorite_border,
            onPress: () {
              _controller.reverse();
            },
          ),
        ],
        animation: _animation,
        onPress: () {
          if (_controller.isCompleted) {
            _controller.reverse();
          } else {
            _controller.forward();
          }
        },
      ),
    );
  }
}

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