FloatingActionButton 端对齐剪切图标

Question

I have positioned a FloaatingActionButton at the end (I would like to have a bottom right alignment) but unfortunately it goes too far off the right with part of the bottom being cut off by the margins

            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: displayDialog,
                  child: Icon(
                    Icons.queue_music,
                  ),
                  foregroundColor: Colors.white,
                  backgroundColor: Colors.red[900],
                )
              ],
            ),

how can I add some spacing and avoid this overlap ?

Answer 1

Add Container in the widgets as child of Row after FAB having some margin on right

   Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              onPressed: displayDialog,
              child: Icon(
                Icons.queue_music,
              ),
              foregroundColor: Colors.white,
              backgroundColor: Colors.red[900],
            ),
             Container(
               margin: EdgeInsets.only(right: someMargin),
             ),
          ],
        ),