How to give gaps between FloatingActionButton in Flutter?

Question

I am just getting started with flutter and not getting how should i give gaps between this 2 FloatingActionButton

 Widget abcde = Container(
  child: Row(
    children: <Widget>[
      Expanded(
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              children: <Widget>[
                FloatingActionButton(
                    backgroundColor: Colors.blue,
                    onPressed: (){},
                    child: Icon(Icons.call)),
                FloatingActionButton(
                    backgroundColor: Colors.blue,
                    onPressed: (){},
                    child: Icon(Icons.call)),
              ],
            ),
          )
      ),
    ],
  ),
);

Does this answer your question? [Space between Column's children in Flutter](https://stackoverflow.com/questions/52774921/space-between-columns-children-in-flutter) — AskNilesh, May 12 '20 at 16:19

score 1 · Accepted Answer · answered May 12 '20 at 16:21

There are many ways to go about this:

Add mainAxisAlignment: MainAxisAlignment.spaceEvenly, or another spacing option to the Row widget.
Wrap your FloatingActionButtons with Container and add margins/padding, or wrap them with Padding/Margin widgets directly.
Add a widget in between, like a Container/SizedBox/Spacer

I'd recommend 1:

Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      //Fab 1,
      //Fab 2
    ]
),

score 0 · Answer 2 · answered May 12 '20 at 16:14

0

Add SizedBox.

 FloatingActionButton(
            backgroundColor: Colors.blue,
            onPressed: () {},
            child: Icon(Icons.call)),
        SizedBox(
          width: 10,
        ),
        FloatingActionButton(
            backgroundColor: Colors.blue,
            onPressed: () {},
            child: Icon(Icons.call)),

answered May 12 '20 at 16:14

Viren V Varasadiya

25,492
9
45
61

Mark my answer if is useful. – Viren V Varasadiya May 12 '20 at 17:05

How to give gaps between FloatingActionButton in Flutter?

2 Answers2