-2
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(),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Por que está dando bottom overflowed pessoal?

1 Resposta 1

4

Está dando Bottom Overflowed ao clicar no TextField e abrir o teclado, certo?

Isso ocorre porque ao clicar no TextField a árvore de widgets é atualizada com o teclado aparecendo ao topo, com isso, o espaço que antes estava livre para renderizar o body do Scaffold foi alterado.

Para ilustrar, coloque o body dentro de um LayoutBuilder, esse builder é chamado sempre que as constraints (basicamente o tamanho disponível) do layout forem alteradas:

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(),
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    },
  )

Ao rodar você verá algo no log como:

I/flutter (18148): Height 560.0

I/flutter (18148): Width 360.0

E ao clicar no TextField:

I/flutter (18148): Height 278.0

I/flutter (18148): Width 360.0

Ou seja, a 'altura' disponível para renderizar o body foi alterada. Por conta disso, já não cabe mais o TextField na tela, ocorrendo um famoso erro de 'Overflowed'.

Para corrigir isso é simples, você precisa avisar o layout que ele deve se ajustar sem que ocorra erro, no seu caso, a solução mais simples é colocar o body dentro de um SingleChildScrollView, que irá se ajustar com um scroll para telas menores ou espaços menores.

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(),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .