SingleChildScrollView with ListView in a showModalBottomSheet

Question

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: