Keyboard is closing after clicking on TextFormField in flutter

Question

I tried every possible answer on stackoverflow, still not able to solve this problem. Whenever I click on any TextFormField, it opens and closes keyboard immediately. And also keyboard tries covers password fields.

import 'package:flutter/material.dart';
import 'package:metro_prototype/pages/loginPage.dart';

import '../uiConstsants.dart';

class RegisterPage extends StatefulWidget {
  static final String routeName = "/registerPage";

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

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;

    FocusScope.of(context).unfocus();
    return Scaffold(
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.white, color1])),
          //#002D72
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Hero(
                tag: 'logo',
                child: Padding(
                  padding:
                      const EdgeInsets.only(left: 100, right: 100, bottom: 30),
                  child: ClipOval(
                    child: Image.asset(
                      'images/haiko1.jpg',
                      height: width / 4,
                      width: width / 4,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15)),
                  child: Padding(
                    padding: const EdgeInsets.all(25.0),
                    child: Column(
                      children: [
                        TextFormField(
                          decoration: textfield1Deco.copyWith(
                            prefixIcon: Icon(Icons.account_circle),
                            hintText: "Enter your name",
                            labelText: "Name",
                          ),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          decoration: textfield1Deco.copyWith(
                              prefixIcon: Icon(Icons.phone),
                              hintText: "Enter your mobile number",
                              labelText: "Mobile Number"),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          decoration: textfield1Deco.copyWith(
                            prefixIcon: Icon(Icons.lock),
                            hintText: "Enter your password",
                            labelText: "Password",
                          ),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          decoration: textfield1Deco.copyWith(
                            prefixIcon: Icon(Icons.lock),
                            hintText: "Enter your password",
                            labelText: "Password",
                          ),
                        ),
                        SizedBox(height: 30),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            getButton("Register", Icons.person_add, () {
                              Navigator.pop(
                                  context,
                                  PageRouteBuilder(
                                    transitionDuration:
                                        Duration(milliseconds: 2000),
                                    pageBuilder: (_, __, ___) => LoginPage(),
                                  ));
                            })
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

I am getting render problem on column, I also tried putting it in SingleChildScrolView.

The following assertion was thrown during layout: A RenderFlex overflowed by 22 pixels on the bottom.

The relevant error-causing widget was: Column file:///D:/Android/FlutterApp/metro_prototype/lib/pages/registerPage.dart:29:18 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 (eg 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.

The specific RenderFlex in question is: RenderFlex#ee67d relayoutBoundary=up4 OVERFLOWING... needs compositing... parentData: (can use size)... constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=561.1)... size: Size(411.4, 561.1)... direction: vertical... mainAxisAlignment: center... mainAxisSize: max... crossAxisAlignment: center... verticalDirection: down

Answer 1

There are two problems to tackle in your code.

1. Keyboard disappearing right after appearing.

This is being caused because in your Widget build function you have a FocusScope.of(context).unfocus(); line. Every time the keyboard comes up, a screen layout is rebuilt, but in your case, as soon as it's built, you're also removing focus, so the keyboard goes back down. I'm not sure why you have that line, but if you remove it, the keyboard comes up and stays. If you must have the line for some reason (ie, when the widget is first built, the focus must be removed), then put it only in the initState function, not the build function.

2. RenderFlex overflow.

This is happening because you are using a column, which is generally used for a layout that's supposed to entirely fit in the screen. In your case, when the keyboard comes up, everything can't be fit on the screen. If you remove your logo from the top, there's enough space and the error goes away. Another option you have (if you want to keep the logo) is to replace the Column with a ListView.

This is the final code that's working for me:

import 'package:flutter/material.dart';
import 'package:metro_prototype/pages/loginPage.dart';
import '../uiConstsants.dart';

class RegisterPage extends StatefulWidget {
  static final String routeName = "/registerPage";

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

class _RegisterPageState extends State<RegisterPage> {

  @override
  void initState() {
    super.initState();
    FocusScope.of(context).unfocus();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;

    // FocusScope.of(context).unfocus();
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.white, color1])),
          //#002D72
          child: ListView(
            // mainAxisAlignment: MainAxisAlignment.center,
            // crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Hero(
                tag: 'logo',
                child: Padding(
                  padding:
                      const EdgeInsets.only(left: 100, right: 100, bottom: 30),
                  child: ClipOval(
                    child: Image.asset(
                      'images/haiko1.jpg',
                      height: width / 4,
                      width: width / 4,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15)),
                  child: Padding(
                    padding: const EdgeInsets.all(25.0),
                    child: Column(
                      children: [
                        TextFormField(
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.account_circle),
                            hintText: "Enter your name",
                            labelText: "Name",
                          ),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          decoration: InputDecoration(
                              prefixIcon: Icon(Icons.phone),
                              hintText: "Enter your mobile number",
                              labelText: "Mobile Number"),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.lock),
                            hintText: "Enter your password",
                            labelText: "Password",
                          ),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.lock),
                            hintText: "Enter your password",
                            labelText: "Password",
                          ),
                        ),
                        SizedBox(height: 30),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            getButton("Register", Icons.person_add, () {
                              Navigator.pop(
                                  context,
                                  PageRouteBuilder(
                                    transitionDuration:
                                        Duration(milliseconds: 2000),
                                    pageBuilder: (_, __, ___) => LoginPage(),
                                  ));
                            })
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

The best possible solution would be to replace the Column Widget with a ListView Widget .