Bottom Overflowed

Question

import 'package:flutter/material.dart';
//import 'package:font_awesome_flutter/font_awesome_flutter.dart';
//import 'package:flutter/widgets.dart';
//import 'package:typicons_flutter/typicons_flutter.dart';

void main() async {
  runApp(MaterialApp(
    home: Home(),
    theme: new ThemeData(
      hintColor: Colors.white,
      primaryColor: Colors.black,
    ),
  ));
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          "Calcular Cerveja",
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.orange,
        centerTitle: true,
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Image.asset(
              'assets/ber2.png',
              width: 250.0,
              height: 250.0,
            ),
            Container(
              padding: EdgeInsets.all(15.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Divider(),
                  TextField(
                    decoration: InputDecoration(
                      hintText: "Teste",
                      labelText: "teste",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Why are you giving personal bottom overflowed?

Answer 1

Is giving Bottom Overflowed by clicking on TextField and open the keyboard, right?

This is because by clicking on TextField the widgets tree is updated with the keyboard appearing at the top, with this, the space that was previously free to render the body of Scaffold was amended.

To illustrate, place the body within a LayoutBuilder, this Builder is called whenever the constraints (basically the available size) of the layout are changed:

body: LayoutBuilder(
    builder:
        (BuildContext context, BoxConstraints constraints) {
      print('Height ${constraints.maxHeight}');
      print('Width ${constraints.maxWidth}');

      return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Image.asset(
            'assets/Y.png',
            width: 250.0,
            height: 250.0,
          ),
          Container(
            padding: EdgeInsets.all(15.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Divider(),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Teste",
                    labelText: "teste",
                    border: OutlineInputBorder(),
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    },
  )

When you rotate you will see something in the log like:

I/flutter (18148): Height 560.0

I/flutter (18148): Width 360.0

And by clicking on TextField:

I/flutter (18148): Height 278.0

I/flutter (18148): Width 360.0

That is, the 'height' available to render the body was amended. As a result, the TextField on screen, occurring a famous error of 'Overflowed''.

To fix this is simple, you need to warn the layout that it should fit without error occurring, in your case the simplest solution is to put the body within a SingleChildScrollView, that will fit with a scroll for smaller screens or smaller spaces.

body: SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Image.asset(
          'assets/Y.png',
          width: 250.0,
          height: 250.0,
        ),
        Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Divider(),
              TextField(
                decoration: InputDecoration(
                  hintText: "Teste",
                  labelText: "teste",
                  border: OutlineInputBorder(),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),