flutter move floatingActionButton up 50 pixels

Question

Is it possible to move the floatingActionButton up by 50 pixels?

I have a floatingActionButton in an App that uses firebase_admob and the Ads Banner is overlapping on top of the floatingActionButton.

How does one set the floatingActionButton to be 50 pixels from the bottom of the screen?

From the documentation of floatingActionButton I can not seem to pick out how to position the button.

score 89 · Accepted Answer · answered Jan 13 '19 at 20:00

89

Wrap your FloatingActionButton inside a Padding and add the size you want:

    floatingActionButton: Padding(
            padding: const EdgeInsets.only(bottom: 50.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () => null,
            ),
          ),

answered Jan 13 '19 at 20:00

diegoveloper

93,875
20
236
194

1

Thank you for the help. This works better, though the display of the keyboard makes the button pad 50 from the displayed keyboard – Phuthib Jan 13 '19 at 20:11
you could detect if your keyboard is open , then change the value of the padding to 0 , https://stackoverflow.com/questions/47823767/how-to-listen-to-keyboard-on-screen-flutter – diegoveloper Jan 13 '19 at 20:13
1

set resizeToAvoidBottomInset to false in your scaffold and it won't jump when the keyboard gets opened – Tarek Badr Feb 06 '20 at 15:07

score 12 · Answer 2 · answered Jan 13 '19 at 19:37

12

It's simple.

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(),
      floatingActionButton: Align(
          child: FloatingActionButton(onPressed: null),
          alignment: Alignment(1, 0.7)),
    );
  }
}

Use Alignment, as everything is a Widget in Flutter.

answered Jan 13 '19 at 19:37

Doc

10,831
3
39
63

This does help to clear the ads banner, however when the keyboard is displayed, the floatingActionButton jumps to the top. Would prefer it to maintain the bottom padding of 50 pixels – Phuthib Jan 13 '19 at 20:02
fixing it ...wait – Doc Jan 13 '19 at 20:03
hmm it seems to jump up either with padding or using align.Can you share the code or UI? – Doc Jan 13 '19 at 20:05
2

The jump happens with both Align and Padidng as suggested by diegoveloper. However the behavior is much better with Padding and as such I will award that as the correct answer. Thank you for the help – Phuthib Jan 13 '19 at 20:08

flutter move floatingActionButton up 50 pixels

2 Answers2