SingleChildScrollView with ListView in a showModalBottomSheet [duplicate] - flutter

Question

This question already has answers here:
How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?
(24 answers)
Closed 6 months ago.
I am using a SingleChildScrollView with a ListView in a showModalBottomSheet but the keyboard is hidding the field when the user is filling it.
showModalBottomSheet(
context: context,
isScrollControlled: true,
enableDrag: true,
isDismissible: false,
builder: (context) {
return SafeArea(
child: Container(
decoration: ...
child:Column(
children:[
Text("...),
Expanded(
child: SingleChildScrollView(
child: ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return TextField(...)
]);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
),
Button(...),
]),
));
}

Answer 1

Wrap your modal builder with SingleChildScrollView and add padding to it like this:
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
full example:
showModalBottomSheet(
context: context,
isScrollControlled: true,
enableDrag: true,
isDismissible: false,
builder: (context) {
return SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(8.0),
topRight: const Radius.circular(8.0)),
),
padding: EdgeInsets.only(left: 16, right: 16, bottom: 16),
child: Column(
children: [
ListView.separated(
// padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return TextField(
decoration: InputDecoration(hintText: 'text'),
);
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(),
),
ElevatedButton(
onPressed: () {
_showBottom(context);
},
child: Text('button')),
],
),
),
);
})
when keyboard is close:
when it is open:

Answer 2

You can add the SingleChildScrollView up right after the safearea widget.
Now, you will get an error because the children does not have a boundary height.
You can use the height of the screen to set the container height.
Then add padding to the SingleChildScrollView matching the keyboard height
Showing lines with significant changes below
showModalBottomSheet(
context: context,
isScrollControlled: true,
enableDrag: true,
isDismissible: false,
builder: (context) {
return SafeArea(
child: SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(children: [
TextField(),
Expanded(
child: ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return TextField();
},
separatorBuilder:
(BuildContext context, int index) =>
const Divider(),
),
),
TextField(),
]),
),
),
);
});