jhontona/animated-floatbuttons

Allows you to create a collapsible list of float buttons. Based on Agung Surya's tutorial in https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc

animated_floating_buttons

This package is based on Agung Surya's tutorial. You can visit his post for more technical information about the package. https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Screenshots

Usage

To use this plugin:

In your flutter project add the dependency:

dependencies:
    ...
    animated_floating_buttons: ^0.0.1

Example

//Import package
import 'package:animated_floating_buttons/animated_floating_buttons.dart';
...
      /// when you want to close the menu you have to create 
      final GlobalKey<AnimatedFloatingActionButtonState> key =GlobalKey<AnimatedFloatingActionButtonState>();
      /// and then assign it to the our widget library
Widget float1() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        heroTag: "btn1",
        tooltip: 'First button',
        child: Icon(Icons.add),
      ),
    );
}

Widget float2() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        heroTag: "btn2",
        tooltip: 'Second button',
        child: Icon(Icons.add),
      ),
    );
}
...
Scaffold(
    floatingActionButton: AnimatedFloatingActionButton(
        //Fab list
        fabButtons: <Widget>[
            float1(), float2()
        ],
        key : key,
        colorStartAnimation: Colors.blue,
        colorEndAnimation: Colors.red,
        animatedIconData: AnimatedIcons.menu_close //To principal button
    ),
)

Complete example here

Issues

Be aware that you have to pass heroTag parameter to every new fab you create 
Otherwise you will get an exciption.

animated-floatbuttons's Issues

Edit the example section

in the example section you are using wrong (probably old) values for colours
Edit them to be like the example

animated-floatbuttons/example/example.dart

Line 57 in 20036bf

colorStartAnimation: Colors.blue,

Close after click on fabButtons

I think the UX could be better if the float button toggle it state on clicked the fabButtons

Black Screen

When you enter the screen with the plug-in, it goes black, if I remove the AnimatedFloatingActionButton, it will work again.

FlatButton is shown when onPressed isn't null

In your example all the FloatingAction buttons haven't a onPressed associated function.
In my case I'm using a FlatButton, but when I provide a function to onPressed callback the button is shown already when the animation isn't started.

Widget float7Days() {
    return Container(
      child: FlatButton( 
        child: Text(
          '7 Days',
          style: white,
        ),
        color: myColor,
        onPressed: () async {},
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(28.0)),
      ),
    );
  }

floatingActionButton: AnimatedFloatingActionButton(
        fabButtons: <Widget>[float7Days(), float1Month(),],
        colorStartAnimation: myColor,
        colorEndAnimation: myColor2,
        animatedIconData: AnimatedIcons.menu_close, //To principal button
      ),

There is any simply solution about this problem?

Compatibility problems with Google Maps API?

Hello, I'm trying to use this package in a page where I use a map from Google Maps, everything looks fine but when I run the app everything is black, this does't happen with the normal FloatingActionButton so I guess maybe there's a compatibility problem? I'm new to coding so maybe I made a mistake in my code, I'll add the code here so you can try it and see if it works.
I'm sorry if there's some useless code there, as I said I'm new to coding and I'm trying a bunch of stuff, thanks.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:iziservicios/log_es.dart';
import 'package:iziservicios/perfil.dart';
import 'package:iziservicios/servicio.dart';
import 'package:animated_floatactionbuttons/animated_floatactionbuttons.dart';

class MainpageStateful extends StatefulWidget {
  @override
  Mainpage createState() => Mainpage();
}

class Mainpage extends State<MainpageStateful>{
  
  
  
  Widget comidas() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        tooltip: 'Comidas',
        child: Icon(Icons.restaurant),
      ),
    );
}
Widget estetica() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        tooltip: 'Estética',
        child: Icon(Icons.content_cut),
      ),
    );
}
Widget otros() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        tooltip: 'Otros',
        child: Icon(Icons.more_horiz),
      ),
    );
}
  
  
  
  BuildContext _myContext;

Completer<GoogleMapController>_controller = Completer();

  @override
  
  Widget build(BuildContext context){
    _myContext = context;

List <Marker> _marcadores = [];

_marcadores.add(
  Marker(
  markerId: MarkerId('marker2'),
  position: LatLng(-32.311433, -58.094666),
  infoWindow: InfoWindow(
    title: 'Heladería',
    onTap: (){
        Navigator.push(
                    _myContext,
                MaterialPageRoute(builder: (context) => ServicioStateful()),
                );
    },
    ),
  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
),);
_marcadores.add(Marker(
  markerId: MarkerId('marker1'),
  position: LatLng(-32.3162695, -58.0949139),
  infoWindow: InfoWindow(
    title: 'Restaurante',
    onTap: () {
      //BuildContext context;
        Navigator.push(
                    context,
                MaterialPageRoute(builder: (context) => ServicioStateful()),
                );
    }),
  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
),);

    return new WillPopScope(
    onWillPop: () async => false,
    child: new Scaffold(
      appBar: AppBar(
        title: Text('IZIServicios'),
        backgroundColor: Colors.lightBlue,
        //automaticallyImplyLeading: false,
        //leading: Icon(Icons.menu),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Image.asset('assets/logoapp.png'),
              decoration: BoxDecoration(color: Colors.lightBlue, ),
            ),
/////////////////////////////////////////////////////////////////////////////////////
//cerrar sesión
/////////////////////////////////////////////////////////////////////////////////////
            Container(
              decoration: new BoxDecoration(
                        color: Color(0xFFcdcdcd),
                        border: Border(left: BorderSide(width: 5.0,color: Colors.lightBlue)),
                      ),
              child: ListTile(
              title: Text('Cerrar sesión'),
              onTap: () {
                Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => LoginStateful()),
                );
                },
              ),
            ),
/////////////////////////////////////////////////////////////////////////////////////
//Perfil de usuario
/////////////////////////////////////////////////////////////////////////////////////
            Container(
              decoration: new BoxDecoration(
                        color: Color(0xFFcdcdcd),
                        border: Border(left: BorderSide(width: 5.0,color: Colors.lightBlue)),
                      ),
              child: ListTile(
              title: Text('Editar mi perfil'),
              onTap: () {
                Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => EditarPerfilStateful()),
                );
                },
              ),
            ),
          ],
        ),
      ),
/////////////////////////////////////////////////////////////////////////////////////
//el body (mapa)
/////////////////////////////////////////////////////////////////////////////////////
     body: Stack(
       children: <Widget>[
         GoogleMap(
           onMapCreated: (GoogleMapController controller){
             _controller.complete(controller);
           },
           initialCameraPosition: CameraPosition(
             target: LatLng(-32.3069053, -58.0694765),//poner its como inicio
             zoom: 13.3,
           ),
           compassEnabled: true,
           mapType: MapType.normal,
           rotateGesturesEnabled: true,
           myLocationEnabled: true,
           scrollGesturesEnabled: true,
           zoomGesturesEnabled: true,
           markers: //{serviciodos}
           Set.from(_marcadores),
                    ),
                  ],
                ),
    floatingActionButton: AnimatedFloatingActionButton(
      fabButtons: <Widget>[
        comidas(), estetica(), otros()
      ],
      colorStartAnimation: Colors.lightBlue,
      colorEndAnimation: Colors.red,
      animatedIconData: AnimatedIcons.menu_close,
    ),
               ),
               );
             }
}```

Can we use right to left menu listing?

Can we do right to left or left to right or top to bottom animation instead of bottom to top animation so that we can achieve any orientation menu.

For example, if a list item requires a menu like delete, edit, rename...etc upon clicking the more (...) icon click and placed it on the bottom of the list item and have space horizontally to accommodate more menu items.

The license is missing

It would be great if you could update the LICENSE file to know what license is applied here.

Questions regarding using FloatingActionButton.extended instead

Hello! Would just like to know if this package is compatible with FloatingActionButton.extended! It works perfectly fine with normal FloatingActionButton but when using it together with an extended button, the buttons that were meant to float upwards can now be seen behind the main AnimatedFloatingActionButton. Is there any other way to incorporate text beside the floatingActionButton while using this package?

There are multiple heroes that share the same tag within a subtree

This exception is thrown running your example
Solution: add a unique hero tag as in this answer

add new verssion, support null safety in pub.dev

support null safety in pub.dev