Bottom padding after ListView.Builder - dart

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

This is a bug that's caused by having a Flexible widget and an Expanded widget in the same Row/Column, https://github.com/flutter/flutter/issues/20575
You can fix it by removing the Flexible widget that's wrapping your TextField.

Answer 3

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.