CODEWITHSUNDEEP
flutterdartfloating-action-button
Lemayzeur
Lemayzeur

Reputation: 8525

How to have 2 Floating Action Buttons fixed in some specific positions with Flutter?

I am developing an app with Flutter, and I want to have 2 FABs on the main screen. One in the BottomAppBar which I have done.

Scaffold(
    appBard: AppBar(title: Text("My App")),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: ()=>{}
    ),
    bottomNavigationBar: BottomAppBar(
        color: Style.darkPrimaryColor,
        shape: CircularNotchedRectangle(),
        child: Container( 
            height: 50,
            child: Row(
                 children: <Widget>[]
            ),
        ),
    ),
)

I want to have a second FAB positioned and fixed in the right bottom side of the screen in plus of the centered FAB like the following maquette:

enter image description here

Is there any way to achieve that?

Upvotes: 0

Views: 2751

Answers (2)

ng5002
ng5002

Reputation: 493

Try this:

  Scaffold(
    appBar: AppBar(title: Text("My App")),
    body: Stack(
        children: [
          Positioned(
            bottom: 16,
            right: 16,
            child: FloatingActionButton(
                heroTag: null,
                child: Icon(Icons.add),
                onPressed: ()=>{}
            ),
          ),
        ],
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: ()=>{}
    ),
    bottomNavigationBar: BottomAppBar(
        color: Colors.black54,
        shape: CircularNotchedRectangle(),
        child: Container( 
            height: 50,
            child: Row(
                 children: <Widget>[

                 ]
               ),
            ),
        ),
    )

Upvotes: 1

David
David

Reputation: 1876

I don't think there is any built in way of doing this with the scaffold, but it should be easy enough to just use a stack as your scaffold body, since you can add a floating action button anywhere. However, if you have two, you will need to change the hero tag on one of them to avoid errors when moving to/from that page.

Scaffold(
  appBar: AppBar(title: Text("My App")),
  floatingActionButtonLocation: 
    FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: ()=>{}
  ),
  bottomNavigationBar: BottomAppBar(
    color: Style.darkPrimaryColor,
    shape: CircularNotchedRectangle(),
    child: Container( 
      height: 50,
      child: Row(
        children: <Widget>[]
      ),
    ),
  ),
  body: Stack(
    alignment: Alignment.bottomRight,
      children: [
        Container(
          child: //Use this as if it were the body
        ),
        //Setup the position however you like
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: FloatingActionButton(
            heroTag: null, //Must be null to avoid hero animation errors
            child: Icon(Icons.add),
            onPressed: () => {},
          ),
        ),
      ],
    ),
 )

Upvotes: 2

Related Questions