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(...),
                ]),
          ));
}

Try playing the SingleChildScrollView up right after the safearea, my guess is, the other content might push it down even when text is being entered — ayinloya, Aug 31 '22 at 03:18
https://stackoverflow.com/questions/53869078/how-to-move-bottomsheet-along-with-keyboard-which-has-textfieldautofocused-is-t — user1613360, Aug 31 '22 at 04:06

score 0 · Answer 1 · answered Aug 31 '22 at 04:09

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(),
                          ]),
                        ),
                      ),
                    );
                  });

score 0 · Accepted Answer · answered Aug 31 '22 at 06:21

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:

Thank you. It is working by adding this padding to the container (not the singlechildscrollview). — Chloé, Aug 31 '22 at 06:43

SingleChildScrollView with ListView in a showModalBottomSheet

2 Answers2