CODEWITHSUNDEEP
flutterflutter-layout
Rebelss
Rebelss

Reputation: 502

Multiple floating buttons - Flutter

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

Upvotes: 12

Views: 19735

Answers (3)

Robin
Robin

Reputation: 5427

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: SingleChildScrollView(
  child: Row(
    children: [
      RaisedButton(child: Text('Button1'), onPressed: (){}),
      const SizedBox(height: 10, width: 0),
      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.

Upvotes: 17

Shiru99
Shiru99

Reputation: 459

Try This

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

Upvotes: 6

bayard
bayard

Reputation: 749

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,),
        ...
 ]
),

Upvotes: 4

Related Questions