Flutter/Dart: How do I raise the location of a FAB when using extendBody: true on a Scaffold?

I have created a bottom app bar for my Flutter application which has a notched floating action button. I noticed that the bottom app bar showed a white background behind the button so I used the code extendBody: true on my Scaffold in order to extend the Scaffold behind the app bar.

This worked great, however, on one of my screens I have another floating action button on the right side of the screen which is now hidden by the bottom action bar since the FAB is attached to the bottom of the Scaffold. I have been looking for a solution to raise the location of the FAB button and all advice I have found says to raise the location of the FAB by a certain double value. Since I would like my application to work on a number of screens, I want the height to take into consideration the height of the BottomAppBar so that it looks like the button is locked to the app bar instead of the Scaffold.

Does anyone know how to do this? Thank you for your help in advance.

At the moment, my code looks like this:

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

The above code looks OK on one of the devices I am using, but on slightly smaller screen, it's raising the button too high.

Solution

Instead of EdgeInsets.only(bottom: 50.0) change your code to the following:

floatingActionButton: Padding(
            padding: const EdgeInsets.only(bottom: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom + 70),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () => null,
            ),
          ),

Unfortunately, since the FAB is separated from the bottom navigation bar, there is no direct way to refer to the bottom nav. By using the media query, you can at least set the padding to take the bottom of the screen into consideration. This improves the responsiveness of the FAB when using extendBody: true on the Scaffold widget.

Hope this helps.