Overflow when using viewinsets in a modalButtomSheet

Issue

Problem:

• I’m using MediaQuery and viewInsets to add Padding, when the user
  triggers the keyboard in a modalBottomSheet.
• It looks OK, but I get a message about overflow
• When I draw down the modalBottomSheet manually, I can see the overflow happening behind the sheet.

Code first, then screenshots:

This is the GestureDetector opening the modal sheet:

GestureDetector(
            onTap: () {
              showModalBottomSheet(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(23.r),
                    ),
                  ),
                  isScrollControlled: true,
                  context: context,
                  builder: (bctx) => StatefulBuilder(builder:
                          (BuildContext context, StateSetter setModalState) {
                        return ModalAddFavorite();
                      }));
            },

This is the Widegt that I use as modal sheeet:

    class ModalAddFavorite extends StatefulWidget {
  const ModalAddFavorite({Key? key}) : super(key: key);

  @override
  _ModalAddFavoriteState createState() => _ModalAddFavoriteState();
}

class _ModalAddFavoriteState extends State<ModalAddFavorite> {
  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
        builder: (BuildContext context, StateSetter setModalState) {
      return Padding(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom * 0.98.h),
        //
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                height: 20.h,
              ),
              Container(
                width: 80.w,
                height: 6.w,
                decoration: BoxDecoration(
                  color: Provider.of<CustomColors>(context, listen: false)
                      .customColorScheme['Grey 2'],
                  borderRadius: BorderRadius.circular(6.r),
                ),
              ),
              SizedBox(
                height: 25.h,
              ),
              //
              Text(
                'ADD A FAVORITE',
                style: Provider.of<CustomTextStyle>(context)
                    .customTextStyle('ModalHeader'),
              ),
              SizedBox(
                height: 25.5.h,
              ),
              //
              //
              InputFieldAddFavorite(),
              SizedBox(
                height: 40.h,
              )
            ],
          ),
        ),
      );
    });
  }
}

Screenshots:

Modal Sheet open / keyboard inactive / no overflow

Modal sheet open / keyboard active / overflow warning in Flutter

Modal shett pulled back manually // overflow visible behind the sheet:

Solution

Issue solved: Instead of wrapping the modal sheet in a SingleChildScrollView, I needed to wrap the Column that contains the page itself.

Answered By – Joe

Answer Checked By – Timothy Miller (FlutterFixes Admin)