Flutter; Bottom overflowed by 280 pixels

Question

I created a registration page in my application ,As you can see below, its a list.

But whenever I try to write something I get a warning like ' Bottom overflowed by 280 pixels'...

If you want to look here is my code, Whichever part I click, it always gives the same warning. I tried using Expanded but it failed. Where do I go wrong?

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Center(child: Text('Register')),
              _paddingWidget('E-mail', 'E-mail'),
              _paddingWidget('Verify', 'verify'),
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 22, right: 15, top: 15),
                    child: Container(
                      height: 40,
                      width: 158,
                      child: FlatButton(
                        child: Text(
                          'verify code',
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                        color: Colors.blue,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 22, top: 15),
                    child: Container(
                      height: 40,
                      width: 158,
                      child: FlatButton(
                        child: Text(
                          'Send again',
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                        color: Colors.blue,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ),
                  ),
                ],
              ),
              _paddingWidget('Name', 'Name'),
              _paddingWidget('Surname', 'Surname'),
              _paddingWidget('Password', 'Password'),
              _paddingWidget('Country', 'Country'),
              _paddingWidget('City', 'City'),
              _paddingWidget('company', 'company'),
              Padding(
                padding: EdgeInsets.all(16.0),
                child: Container(
                  height: 50.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: Colors.grey,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 6,
                        offset: Offset(0, 2), // changes position of shadow
                      ),
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        blurRadius: 20,
                        offset: Offset(0, 10), // changes position of shadow
                      ),
                    ],
                  ),
                  child: InkWell(
                    onTap: () {
                      setState(() {});
                    },
                    child: Center(
                      child: Text(
                        'Register',
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

_paddingWidget(String hintTextStr, String labelTextStr) {
  return Padding(
    padding: EdgeInsets.only(top: 15, left: 22, right: 22),
    child: TextFormField(
      keyboardType: TextInputType.text,
      style: TextStyle(
        color: Colors.black,
      ),
      decoration: CommonInputStyle.textFieldStyle(
        hintTextStr: hintTextStr,
        labelTextStr: labelTextStr,
      ),
    ),
  );
}

Answer 1

You should put it inside a SingleChildScrollView . It will do two things helpful to you.

1. Remove the Overflow message.

2. Help you scroll through different fields in the registration form.

Answer 2

enclose SingleChildScrollView to Column in body

return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              Center(child: Text('Register')),
              _paddingWidget('E-mail', 'E-mail'),
              _paddingWidget('Verify', 'verify'),
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 22, right: 15, top: 15),
                    child: Container(
                      height: 40,
                      width: 158,
                      child: FlatButton(
                        child: Text(
                          'verify code',
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                        color: Colors.blue,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 22, top: 15),
                    child: Container(
                      height: 40,
                      width: 158,
                      child: FlatButton(
                        child: Text(
                          'Send again',
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                        color: Colors.blue,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ),
                  ),
                ],
              ),
              _paddingWidget('Name', 'Name'),
              _paddingWidget('Surname', 'Surname'),
              _paddingWidget('Password', 'Password'),
              _paddingWidget('Country', 'Country'),
              _paddingWidget('City', 'City'),
              _paddingWidget('company', 'company'),
              Padding(
                padding: EdgeInsets.all(16.0),
                child: Container(
                  height: 50.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: Colors.grey,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 6,
                        offset: Offset(0, 2), // changes position of shadow
                      ),
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        blurRadius: 20,
                        offset: Offset(0, 10), // changes position of shadow
                      ),
                    ],
                  ),
                  child: InkWell(
                    onTap: () {
                      setState(() {});
                    },
                    child: Center(
                      child: Text(
                        'Register',
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }