Extended FAB would get in the way of a listview

Question

Right now my Flutter app has two pages: the app's home (image 1) and the leaderboard (image 2). The home page has a BottomAppBar with two buttons plus an extended FAB docked to it (the one with mock button written on it), the left one does nothing, and the right one opens the leaderboard page as if it was a "child".

I'd like to switch out the BottomAppBar with a BottomNavigationBar and make the leaderboard page the home's "sibling", instead of it's "child". That would mean having the BottomNavigationBar available on the leaderboard page too, the issue is that the extended FAB, which I would like to keep docked on the BottomNavigationBar in the leaderboard page too, would cover the lowest 'Mock Name'.

How should I change the UI to prevent the extended FAB from covering the lowest row?

Image 1

Image 2

Answer 1

Add a blank section to the bottom of the list, so that the last entry scrolls to and sits above the navigation.

Answer 2

1. Make the BottomNavigationBar available on the leaderboard page, and add elevation to make the bottom bar outstanding. (or add a blank strip like Steve O'Connor's answer)

2. Transform the Extended FAB to standard FAB when switching to the leaderboard page. It is definitely an easy work ~A reference link. Reminder~~ You should also adjust the color and elevation of FAB to make it outstanding.