A RenderFlex overflowed by 4.8 pixels on the bottom. The relevant error-causing widget was Column

Issue

I am Getting An error (overflowed by 4.8 pixels on the bottom). I was creating an emailAuthSheet with showModalBottomSheet while debugging the app it shows the error of overflowed. Can u please guide me…And If Possible can you please also guide me on how to make it responsive for all devices as per their device screen size

The following code is below:

emailAuthSheet(BuildContext context) {
    return showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
              child: 
              Column(
                children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 150.0),
                  child: Divider(
                    thickness: 4.0,
                    color: constantColors.whiteColor,
                  ),
                ),
                Provider.of<LandingService>(context,listen: false).passwordLessSignIn(context),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    MaterialButton(
                        color: constantColors.blueColor,
                        child: Text(
                          'Log in',
                          style: TextStyle(
                              color: constantColors.whiteColor,
                              fontSize: 18.0,
                              fontWeight: FontWeight.bold),
                        ),
                        onPressed: () {}),
                    MaterialButton(
                        color: constantColors.redColor,
                        child: Text(
                          'Sign in',
                          style: TextStyle(
                              color: constantColors.whiteColor,
                              fontSize: 18.0,
                              fontWeight: FontWeight.bold),
                        ),
                        onPressed: () {})
                  ],
                ),
              ]),
              height: MediaQuery.of(context).size.height * 0.5,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: constantColors.blueGreyColor,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15.0),
                      topRight: Radius.circular(15.0))));
        });
}

Below is the pic of the flutter app and error

Solution

Wrap your container with singleChildScrollView

emailAuthSheet(BuildContext context) {
  return showModalBottomSheet(
      context: context,
      builder: (context) {
        return SingleChildScrollView(
          child: Container(
              child:
              Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 150.0),
                      child: Divider(
                        thickness: 4.0,
                        color: constantColors.whiteColor,
                      ),
                    ),
                    Provider.of<LandingService>(context,listen: false).passwordLessSignIn(context),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        MaterialButton(
                            color: constantColors.blueColor,
                            child: Text(
                              'Log in',
                              style: TextStyle(
                                  color: constantColors.whiteColor,
                                  fontSize: 18.0,
                                  fontWeight: FontWeight.bold),
                            ),
                            onPressed: () {}),
                        MaterialButton(
                            color: constantColors.redColor,
                            child: Text(
                              'Sign in',
                              style: TextStyle(
                                  color: constantColors.whiteColor,
                                  fontSize: 18.0,
                                  fontWeight: FontWeight.bold),
                            ),
                            onPressed: () {})
                      ],
                    ),
                  ]),
              height: MediaQuery.of(context).size.height * 0.5,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: constantColors.blueGreyColor,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15.0),
                      topRight: Radius.circular(15.0)))),
        );
      });
}

Answered By – Jahidul Islam

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0