Bottom padding after ListView.Builder

Question

I have a Listview inside a bottom sheet .. like this:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Directionality(
      textDirection: globals.getDirection(),
      child: Container(
        margin: EdgeInsets.only(
          right: 10.0,
          left: 10.0),
        height: MediaQuery.of(context).size.height / 2,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: TextField()
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: false,
                itemCount: nationalities.length,
                itemBuilder: (BuildContext context, int index) {
                  return new Padding(
                    padding: EdgeInsets.only(top: 10.0),
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          _data.nationality = nationalities[index];
                        });
                        Navigator.pop(context);
                      },
                      child: Text(
                        nationalities[index],
                        textAlign: TextAlign.center,
                      ),
                    ));
                },
              ),
            ),
          ),
        );
  }
);

The problem that i have huge white space at the bottom i don't now from where it's coming .. as you can see from the screenshot:

How to remove this white space and make the listview expand in it instead?

Answer 1

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor. That's maybe your problem. Removing it may help you. Next thing ... Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space. Next Thing:

By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

    ListView(
  padding: EdgeInsets.zero,
  ...);

Second Option

  MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)

Sorry for Exrta explanation ;

Answer 2

I faced the same issue when using ListView.builder() in ModalBottomSheet. I have to use Column instead of:

sortList() {
var itemList = <Widget>[
  Text('1'),
  Text('2'),
];

// for loop to add more items here 

return Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: itemList);
}

Removing mainAxisSize: MainAxisSize.min will reproduce the issue.