CODEWITHSUNDEEP
flutterdartfloating-action-button
Alexandra Damaschin
Alexandra Damaschin

Reputation: 840

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(FloatingActionButton 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?

Upvotes: 12

Views: 3768

Answers (2)

adam_th
adam_th

Reputation: 407

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
    ),
  ],
),

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 267454

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
  // ...
),

Upvotes: 29

Related Questions