"A RenderFlex overflowed by 373 pixels on the bottom" problem in flutter [not duplicate]

Question

I have been trying to fix this problem for sometime now. There are similar issues here on stackoverflow but I can't find the one that relates to my problem. The way I have created the layout is kind of complicated since I'm doing too much nesting. This may be a simple problem but since I'm new to flutter I'm failing to figure this out.

Below is a picture so you can have a picture of the issue I'm facing.

import 'package:flutter/material.dart';
import 'package:com.example.simple_app/common_widgets/appbar.dart';

class AddPersonPage extends StatefulWidget {
  AddPersonPage({Key key}) : super(key: key);

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

class _AddPersonPageState extends State<AddPersonPage> {
  int person_id;
  String name, nickname, email, phone, home_address, contact_type;
  DateTime created, updated;

  // final scaffoldKey = new GlobalKey<ScaffoldState>();
  final formKey = new GlobalKey<FormState>();

  // get submitPerson => null;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar(context, 'Add new person', 'otherData'),
      body: new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Form(
          key: formKey,
          child: new Column(
            children: <Widget>[
              Text('Add new person/organisation', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: 'Name (Required)',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.name = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: 'Nickname',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.nickname = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: 'Physical/Home Address (Required)',
                ),
                validator: (val) {
   
                  return null;
                },
                onSaved: (val) => this.home_address = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: 'Email',
                ),
                validator: (val) {
                  if (val.isEmpty) return null;
                  if (EmailValidator.validate(val) == false) {
                    return 'Please enter a valid email address';
                  }
                  return null;
                },
                onSaved: (val) => this.email = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: 'Phone number',
                ),
                validator: (val) {
                  if (val.isEmpty) return null;
                  if (!validPhoneNumber.hasMatch(val)) {
                    return 'Please enter a valid phone number';
                  }
                  return null;
                },
                onSaved: (val) => this.phone = val,
              ),
              TextFormField(
                keyboardType: TextInputType.multiline,
                maxLines: 60,
                decoration: new InputDecoration(
                  labelText: 'Phone number',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.phone = val,
              ),
              new Container(
                margin: const EdgeInsets.only(top: 10.0),
                child: new RaisedButton(
                  color: Color(0xff0091EA),
                  splashColor: Colors.green,
                  onPressed: submitPerson,
                  child: Text('Add Person',
                      style: TextStyle(
                        color: Colors.white,
                      )),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void submitPerson() {
    if (this.formKey.currentState.validate()) {
      formKey.currentState.save();
    } else {
      return null;
    }
        Navigator.pop(context);
  }
}

Posted with love, Thank you.

Answer 1

To avoid this overflow problem you can just wrap all your Scaffold body in a SingleChildScrollView widget.

return Scaffold(
  appBar: appbar(context, 'Add new person', 'otherData'),
  body: SingleChildScrollView(
     child: new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Form(
          // your form layout.
         ),
      ),
  ),
);