Floating action button

Omar farrag

unread,

Jun 3, 2018, 3:46:08 PM6/3/18

to Flutter Dev

Hello there, I have just started learning flutter, I started by re-implementing an android application I have built before. In the old app I had a fragment where there were two floating action buttons, one at bottom right and other and bottom left. I know this may not be a good practice. However, exploring the scaffold code, I see that there is no way to have more than one floating action button. Am I missing something or it's how it's designed ?

Alfanhui

unread,

Jun 3, 2018, 4:05:28 PM6/3/18

to Flutter Dev

The location of the bar is your biggest problem, FloatingActionButtonLocation only gives you centre or end placements, so you would have to find widget structure that would allow you to overlay, like a Stack.

You could possibly nest scaffolds:

Scaffold(
        appBar: AppBar(
          title: Text(this.title),
        ),
        drawer: Sidebar(title: this.title),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: Scaffold(
          body: Center(child: Text("hello")),
          floatingActionButton: FloatingActionButton(
            onPressed: () => {},
          ),
        ),
      );

This will give you one in the centre and one on the right side. Looks a little funky, but might do the job. If you manage it, let us know how you did it.

Omar farrag

unread,

Jun 3, 2018, 7:23:29 PM6/3/18

to Flutter Dev

Yeah I thought of that.. I will give it a try and if I found another way I would let you know for sure :)

Joan Pablo Jiménez

unread,

Jun 5, 2018, 9:30:50 AM6/5/18

to Omar farrag, Flutter Dev

You can create your own widget that combine a Stack (for overlapping widgets) with something else maybe a Scaffold here are some seudocode to get the idea:

new MyScaffold(

    appBar: AppBar(
        title: Text(this.title),
    ),

    body: ...,
    leftFloatingActionButton: FloatingActionButton(onPressed: () => {},),
    rightFloatingActionButton: FloatingActionButton(onPressed: () => {},)
    )
);


class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          floatingActionButton: _rightFloatingActionButton
        ),
        _leftFloatingActionButton
      ],
    );
  }
}

On Sun, Jun 3, 2018 at 7:23 PM Omar farrag <omar.ala...@gmail.com> wrote:

Yeah I thought of that.. I will give it a try and if I found another way I would let you know for sure :)

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward