Multiple floating buttons - Flutter

Question

it's possible to create a float action button which open more float buttons, and If yes, can you give me a example?

Like these :

FloatActionButton padrão

múltiplos botões flutuantes

Here is what you are exactly looking for: https://stackoverflow.com/questions/46480221/flutter-floating-action-button-with-speed-dial — Blasanka, Nov 03 '19 at 03:34
Does this answer your question? [Flutter floating action button with speed dial](https://stackoverflow.com/questions/46480221/flutter-floating-action-button-with-speed-dial) — Blasanka, Nov 03 '19 at 03:34
Hey Blasanka, i found the answer in the comment, using this widget called flutter_speed_dial 1.2.4 https://pub.dev/packages/flutter_speed_dial Can you reply as a answer for me to close the question and accept your comment as a solution ? — Rebelss, Nov 04 '19 at 19:30

score 16 · Answer 1 · answered Nov 03 '19 at 03:24

Flutter gives a named parameter in Scaffold Widget - ‘floatingActionButton’. And the named parameter floatingActionButton shouldn't take only FloatingActionButton widget, it should take Widget and it does. So you can assign another widget instead of FloatingActionButton like as Column, Row, Stack. And it works.

floatingActionButton: Row(
  children: [
    RaisedButton(child: Text('Button1'), onPressed: (){}),
    RaisedButton(child: Text('Button1'), onPressed: (){}),
  ]
),

I just give you a reference example, it will work - you just need to customize the styles and positioning as you want. Hope it will be helpful.

You need to wrap the `Row` in a `SingleChildScrollView`. – Tayan May 27 '20 at 01:19 — Tayan, May 27 '20 at 01:19

score 4 · Answer 2 · answered Jun 03 '21 at 14:44

Try This

floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              onPressed: getImage,
              child: Icon(Icons.camera),
            ),
            SizedBox(height: 8,),
            FloatingActionButton(
              onPressed: getImage,
              child: Icon(Icons.camera),
            ),
          ],
        )

score 2 · Answer 3 · answered Feb 01 '20 at 08:06

Using the SpeedDial widget provided by flutter_speed_dial package you can use multiple float button as children of a parent floating action button. You can also add animated icons.

In your pubspec.yaml under dependecies, add:

dependencies:
 flutter_speed_dial: ^1.2.5

Now you can use the SpeedDial widget in your FAB:

floatingActionButton: SpeedDial(

//provide here features of your parent FAB

children: [
        SpeedDialChild(
          child: Icon(Icons.accessibility),
          label: 'First',
          onTap: null,),
        SpeedDialChild(
          child: Icon(Icons.accessibility),
          label: 'Second',
          onTap: null,),
        ...
 ]
),

Multiple floating buttons - Flutter

3 Answers3