Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FloatingActionButton over last item of list

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?

like image 487
Alexandra Damaschin Avatar asked Aug 22 '19 07:08

Alexandra Damaschin


2 Answers

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
  // ...
),
like image 142
CopsOnRoad Avatar answered Nov 19 '22 21:11

CopsOnRoad


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
    ),
  ],
),
like image 1
adam_th Avatar answered Nov 19 '22 19:11

adam_th