A RenderFlex overflowed by 147 pixels on the bottom

Question

Here is the screenshot of the app I am trying to build.

The Date of birth field should show a calendar on click of it. Suppose I am in the email textformfield and the keyboard is open and now the user moves to date of birth field. As soon as user taps on date of birth field, I am removing the keyboard and showing the calendar, at that time I am getting exception saying A RenderFlex overflowed by 147 pixels on the bottom.

I have already gone through a bunch of stack questions on this and it mentioned to use a ListView, which I am using. Here is a snippet of my code.

return Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
          child: Padding(
        padding: const EdgeInsets.fromLTRB(20.0, 8.0, 40.0, 8.0),
        child: InkWell(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: ListView(
            children: <Widget>[
              Image.asset(
                "images/alphaurbanelogo.png",
                width: 150.0,
                height: 150.0,
              ),
              Text("Sign Up",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: "aktivgroteskBold",
                      fontSize: 25.0)),
              SizedBox(
                height: 5.0,
              ),
              Text("Create an account to access\n TAUP system",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: "aktivgroteskLight",
                      fontSize: 15.0)),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "First Name",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Last Name",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Email",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              InkWell(
                onTap: () {
                  FocusScope.of(context).requestFocus(FocusNode());
                  _selectDate(context);
                },
                child: Row(
                  children: <Widget>[
                    Flexible(
                      child: TextFormField(
                          style: TextStyle(
                              color: Color(0xFF5c2a7c), height: 2.0),
                          enabled: false,
                          controller: dobController,
                          decoration: InputDecoration.collapsed(
                            hintText: "Date of Birth",
                            hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                          )),
                    ),
                    Icon(
                      Icons.email,
                      color: Color(0xFF5c2a7c),
                    ),
                  ],
                ),
              ),
              Divider(
                color: Color(0xFF5c2a7c),
                height: 5.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Contact Number",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Parent Email",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Parent Contact Number",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              DropdownButton<String>(
                items: _schools.map((String dropDownStringItem) {
                  return DropdownMenuItem<String>(
                    value: dropDownStringItem,
                    child: Text(dropDownStringItem),
                  );
                }).toList(),
                hint: Text("School/Institution"),
                onChanged: (String newValueSelected) {
                  setState(() {
                    this._currentItemSelected = newValueSelected;
                  });
                },
                value: _currentItemSelected,
                style: TextStyle(color: Color(0xFF5c2a7c), fontSize: 16.0),
              ),
              SizedBox(
                height: 1.0,
              ),
              Divider(
                color: Color(0xFF5c2a7c),
                height: 5.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              Row(
                children: <Widget>[
                  Spacer(),
                  InkWell(
                    child: Image.asset(
                      "images/next.png",
                      width: 40.0,
                      height: 40.0,
                    ),
                    onTap: () {},
                  )
                ],
              )
            ],
          ),
        ),
      )),
      BottomBar()
    ],
  ),
);


Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: new DateTime(1900),
        lastDate: new DateTime(2100));

    if (picked != null) {
      var formatter = new DateFormat('yyyy-MM-dd');
      choosenDate = formatter.format(picked);
      dobController.text = choosenDate;
    }
  }

Answer 1

I am using a Form widget and its bottom was overflown, so similar problem. My solution was to apply a SingleChildScrollView widget. It was very convenient, as I was using a padding widget and this one has a padding property too. Just replaced it and perfect.

return Form(
        key: _formKey,
        autovalidate: _autoValidate,
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(10.0),
          child: Column(
  (...)

Source

Answer 2

If you're using a scaffold, type ResizetToAvoidBottomPadding: false.