How can I add extra bottom spacing in ListView?

Question

When using FloatingActionButton in conjunction with a ListView, it hides part of the UI of the ListView entries, as seen in the screenshot.
Is there a way to automatically add extra spacing at the bottom of a ListView so that the + button does not hide any content?

Answer 1

Assuming you are using ListView, there is a very nice and simple solution to this.
You probably do not want to add padding around the ListView itself as that would make some area of your UI unused.

ListView has apadding parameter for exactly this use case. You can essentially add some padding to the bottom of your ListView that is part of the scrollable area. This means that you will only start seeing this padding once you have scrolled all the way to the bottom. This will allow you to drag the last few items above the FloatingActionButton.
To find an appropriate value for the padding, you can make use of kFloatingActionButtonMargin and _kExtendedSizeConstraints, which is not accessible, thus, I will just use 48 like this.

This means that you will want to add the following to your ListView:

ListView(
  padding: const EdgeInsets.only(bottom: kFloatingActionButtonMargin + 48),
  ..
)

Here is a working example:

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: ListView.builder(
        padding: const EdgeInsets.only(bottom: kFloatingActionButtonMargin + 48),
        itemCount: 23,
        itemBuilder: (context, index) => ListTile(
              trailing: Text('$index'),
            )),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
    ),
  )));
}

Answer 2

Expandable( ListView.builder( ... padding: EdgeInsets.only(bottom: 200), ... ) )