FloatingActionButton over last item of list

Question

I have a scrollable list with a FloatingActionButton. I would like to make the list to finish before the FloatingActionButton because last item of list isn't visible anymore(FAB it's over list item)

return Scaffold(
    body: ListView(
      scrollDirection: Axis.vertical,
      controller: _scrollController,
      shrinkWrap: true,
      children: <Widget>[
        _buildUpcomingExpansionTileEvents(myUpcomingEvents),
        _buildPastExpansionTileEvents(myPastEvents),
      ],
    ),
    floatingActionButton: UnicornDialer(
        parentButtonBackground: Colors.blue,
        orientation: UnicornOrientation.VERTICAL,
        parentButton: Icon(OMIcons.add),
        childButtons: childButtons));

How could I change my list to finish with one empty item? Or what's the best solution to this problem?

Solution 1

FloatingActionButton has size of 56 for non-mini and 40 for mini, so what you can do is use padding in ListView like:

ListView(
  padding: EdgeInsets.only(bottom: 56), // if you have non-mini FAB else use 40
  // ...
),

Solution 2

To solve this I just add a sized box as the last element in the list. That way you still get the end of list highlight in the correct place when the user scrolls to the bottom of the list.

ListView(
  scrollDirection: Axis.vertical,
  controller: _scrollController,
  shrinkWrap: true,
  children: <Widget>[
    _buildUpcomingExpansionTileEvents(myUpcomingEvents),
    _buildPastExpansionTileEvents(myPastEvents),
    SizedBox(
      height: 100, // or whatever height works for your design
    ),
  ],
),