显示键盘时底部溢出 x 像素

Question

I'm new to Flutter and I have a problem. When I click on TextField and keyboard is shown I get this error and also it's impossible to click button 'Kontynuuj'.

A RenderFlex overflowed by 227 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///C:/../lib/ui/pages/EmailPage.dart:37:16
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

When keyboard is not shown, everything works correctly and I can properly click on any place of a button and it works. I want to make it run on any device with different resolution so it should work dynamically. Could help me? What should I change?

Code:

import 'dart:io';

//imports

import 'LoginPage.dart';

class EmailPage extends StatefulWidget {
  static final routeName = 'edit-product';

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

class _EmailPage extends State<EmailPage> {
  ...;

  final emailController = TextEditingController();

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Zaloguj się"),
      ),
      body: Container(
        padding: EdgeInsets.all(40.0),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            FlutterLogo(size: 130),
            SizedBox(
              height: 30.0,
            ),
            Text(
              'Zaloguj lub zarejestruj się za pomocą adresu e-mail',
              style: TextStyle(
                fontSize: 18,
                color: Color(0xff000000),
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 30.0,
            ),
            Form(
              child: TextFormField(
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter an email';
                  } else if (!EmailValidator.validate(value)) {
                    return 'Please enter proper mail';
                  }
                  return null;
                },
                controller: emailController,
                decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Adres e-mail',
                    fillColor: Color(0xffdbdbdb),
                    filled: true),
              ),
              key: _formKey,
            ),
            SizedBox(
              height: 15.0,
            ),
            ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 240, height: 60),
              child: ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    moveToProperWindowBasedOnEmail(
                        emailController.text, context);
                  }
                },
                child: Text('Kontynuuj',
                    style: TextStyle(
                      fontSize: 30,
                      color: Color(0xffffffff),
                    ),
                    textAlign: TextAlign.center),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(
                    Color(0xFF2F45C6),
                  ),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.0),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 35.0,
            ),
            Text(
              'Możesz też się zalogować za pomocą:',
              style: TextStyle(
                fontSize: 18,
                color: Color(0xff000000),
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 15.0,
            ),
            SignInButton(
              Buttons.Google,
              text: "Sign up with Google",
              onPressed: () {},
            ),
            SignInButton(
              Buttons.Facebook,
              text: "Sign up with Facebook",
              onPressed: () {},
            )
          ],
        ),
      ),
      backgroundColor: const Color(0xFEF2F7FD),
    );
  }

  Future<void> moveToProperWindowBasedOnEmail(
      String text, BuildContext context) async {
    //something
    }
  }
}

Answer 1

Solution 1:

In your Scaffold, set "resizeToAvoidBottomInset" property to false.

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

Solution 2:

Force your column to be the same height as the screen, then place it in a SingleChildScrollView so that Flutter automatically scrolls the screen up just enough when the keyboard is used.

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

Answer 2

The best solution would be to wrap your widgets in a SingleChildScrollView :

 return Scaffold(
      appBar: AppBar(
        title: Text("Zaloguj się"),
      ),
      body: SingleChildScrollView(child: ...),
  );