Search code examples
flutterwidgetpositionfloating-action-button

How do I position a FAB in between 2 widgets in Flutter?


I want to achieve the following look:

FAB in between

How can I make the FAB flex-ibly positioned in between these 2 widgets? (between top profile image and bottom profile info)

I've managed to make the 2 containers, but I haven't got a clue on how to position the FAB at the exact horizontal border of them.

My code (this is the entire widget tree, wrapped in a scaffold):

Row(
    children: <Widget>[
        Expanded(
        child: Column(
            children: <Widget>[
            Expanded(
                flex: 4,
                child: Container(
                    decoration: BoxDecoration(color: Colors.grey.shade300),
                ),
            ),
            Expanded(
                flex: 6,
                child: Container(),
            ),
            ],
        ),
        ),
    ],
),

Solution

  • You can use a Stack & Positioned widget together to position the FAB as per your requirement.

    Stack(
      children:[
       // Add your existing row & it's child here,
       Positioned(
         child: FloatingActionButton(
           onPressed:(){ },
           child: Icon(Icons.camera_alt)
         ),
         right: 5,
         top: MediaQuery.of(context).size.height * .3,
       )
      ],
    ),
    

    And the output:

    FAB Alignment

    Note: You may need to tweak the top value of the positioned widget to place the FAB accurately in your case. If you know the exact height of that image widget, you can set top as height - 28.