Flutter TextField hidden by Keyboard, try many solution but not working

Question

When focussing on the TextField, the keyboard hides over the TextField. Below I attached a screenshot with code. Please guide me in fixing this issue.

signup.dart

import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';

class SignUpPage extends StatefulWidget {
  static String tag = 'SignUpPage';
  @override
  _SignUpPageState createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
            gradient: LinearGradient(begin: Alignment.topCenter, colors: [
          Color(0xFF832685),
          Color(0xFFC81379),
        ])),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 80,
            ),
            Padding(
              padding: EdgeInsets.only(top: 0, bottom: 20, left: 20, right: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "SignUp",
                    style: TextStyle(color: Colors.white, fontSize: 28),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "",
                    style: TextStyle(color: Colors.white, fontSize: 14),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(60),
                        topRight: Radius.circular(60))),
                child: Padding(
                  padding:
                      EdgeInsets.only(top: 20, bottom: 0, right: 20, left: 20),
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: MediaQuery.of(context).size.height / 1.5,
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.only(top: 60),
                        child: Column(
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.person,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Full Name',
                                ),
                              ),
                            ),

                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              margin: EdgeInsets.only(top: 16),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.email,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Email',
                                ),
                              ),
                            ),

                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              margin: EdgeInsets.only(top: 16),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.call,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Mobile Number',
                                ),
                              ),
                            ),

                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              margin: EdgeInsets.only(top: 16),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.vpn_key,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Password',
                                ),
                                obscureText: true,
                              ),
                            ),
                            Spacer(),

                            Container(
                              padding: EdgeInsets.all(16),
                              width: double.infinity,
                              child: RaisedButton(
                                elevation: 5.0,
                                padding: EdgeInsets.all(12),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(30),
                                ),
                                color: Color(0xFFC81379),
                                child: Text(
                                  'Sign Up'.toUpperCase(),
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                                onPressed: () {
                                  //Navigator.of(context).pushNamed('HomePage');
                                },
                              ),
                            ),

                            Align(
                              alignment: Alignment.center,
                              child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    new FlatButton(
                                      child: Padding(
                                        padding: const EdgeInsets.only(
                                            top: 0, right: 16, left: 16),
                                        child: new Text(
                                          Desc.alreadyUser,
                                          style: TextStyle(color: Colors.grey),
                                        ),
                                      ),
                                      onPressed: () {
                                        Navigator.of(context)
                                            .pushNamed('SignInPage');
                                      },
                                      color: Colors.white,
                                      highlightColor: Colors.transparent,
                                    ),
                                  ]),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

i am try with this solution:

TextFormField hidden by keyboard - Flutter

Flutter/Dart Scrolling textfield above keyboard

in flutter page textfield hidden by keyboard

TextField gets hidden when the keyboard pops in

Flutter Keyboard makes textfield hide

Flutter TextFormField hidden by keyboard

When I select a Textfield the keyboard moves over it

Try this solution : https://stackoverflow.com/questions/53586892/flutter-textformfield-hidden-by-keyboard — Karan Mehta, Jan 17 '20 at 07:14

Selim Kundakçıoğlu · Accepted Answer · 2020-01-17T11:02:44.880

4

Can you wrap the body of your Scaffold with SingleChildScrollView and wrap your Container with the ConstrainedBox

Here is the output that I get https://prnt.sc/qozsvc

Keyboard will still be on top of the textfields but by using SingleChildScrollView, screen will be scrollable so you can scroll down and see textfields again.

This solution works for me.

Scaffold(
  body: SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
      child: Container(
        .
        .
        .

edited Jan 17 '20 at 11:02

answered Jan 17 '20 at 08:08

Selim Kundakçıoğlu

1,986
10
20

2

i'll try, Not Working – MohammedAli Jan 17 '20 at 09:02

score 1 · Answer 2 · answered Jan 17 '20 at 09:51

Hey There I fixed your issue using Expanded widget Just Wrap your child content with Expanded widget. and remove some extra column which we don't need, Try my Below code and let me know it is working or not

import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';


    class SignUpPage extends StatefulWidget {
      static String tag = 'SignUpPage';
      @override
      _SignUpPageState createState() => _SignUpPageState();
    }

    class _SignUpPageState extends State<SignUpPage> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          resizeToAvoidBottomPadding: false,
          resizeToAvoidBottomInset: true,
          body: Container(
            width: double.infinity,
            decoration: BoxDecoration(
                gradient: LinearGradient(begin: Alignment.topCenter, colors: [
                  Color(0xFF832685),
                  Color(0xFFC81379),
                ])),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: signUpCardUI(context),
                ),
              ],
            )
          ),
        );
      }
    }

    Widget signUpCardUI(BuildContext context){
      return SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 80,
            ),
            Padding(
              padding: const EdgeInsets.only(left:20.0),
              child: Text(
                "SignUp",
                style: TextStyle(color: Colors.white, fontSize: 28),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50.0),
              ),
              child: Padding(
                padding:
                EdgeInsets.only(bottom: 0, right: 20, left: 20),
                child: Column(
                  children: <Widget>[
                    Container(
                      height: MediaQuery.of(context).size.height / 1.5,
                      width: MediaQuery.of(context).size.width,
                      padding: EdgeInsets.only(top: 60),
                      child: Column(
                        children: <Widget>[
                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.person,
                                  color: Colors.grey,
                                ),
                                hintText: 'Full Name',
                              ),
                            ),
                          ),

                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            margin: EdgeInsets.only(top: 16),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.email,
                                  color: Colors.grey,
                                ),
                                hintText: 'Email',
                              ),
                            ),
                          ),

                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            margin: EdgeInsets.only(top: 16),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.call,
                                  color: Colors.grey,
                                ),
                                hintText: 'Mobile Number',
                              ),
                            ),
                          ),

                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            margin: EdgeInsets.only(top: 16),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.vpn_key,
                                  color: Colors.grey,
                                ),
                                hintText: 'Password',
                              ),
                              obscureText: true,
                            ),
                          ),
                          Spacer(),

                          Container(
                            padding: EdgeInsets.all(10),
                            width: double.infinity,
                            child: RaisedButton(
                              elevation: 5.0,
                              padding: EdgeInsets.all(12),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                              color: Color(0xFFC81379),
                              child: Text(
                                'Sign Up'.toUpperCase(),
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold),
                              ),
                              onPressed: () {
                                //Navigator.of(context).pushNamed('HomePage');
                              },
                            ),
                          ),

                          Align(
                            alignment: Alignment.center,
                            child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  new FlatButton(
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                          top: 0, right: 16, left: 16),
                                      child: new Text(
                                         Desc.alreadyUser,
                                        style: TextStyle(color: Colors.grey),
                                      ),
                                    ),
                                    onPressed: () {
                                      Navigator.of(context)
                                          .pushNamed('SignInPage');
                                    },
                                    color: Colors.white,
                                    highlightColor: Colors.transparent,
                                  ),
                                ]),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }

Happy Coding :)

bro i want my page Scroll, your code give me this output https://prnt.sc/qoyt9u , your code reduce my Space, not Scroll My Page — MohammedAli, Jan 17 '20 at 09:59

score 0 · Answer 3 · answered Jan 17 '20 at 09:25

0

did you try using the form widget? add child as SingleChildScrollView which can have textformfield.

answered Jan 17 '20 at 09:25

himeshp

353
4
12

Scaffold( body: SingleChildScrollView( child: Form( child: Container( . . . i'll try like this – MohammedAli Jan 17 '20 at 09:27
body>form>SingleChildScrollView>column>Textformfield..... like this – himeshp Jan 17 '20 at 09:31
kindly check online for form widgets - the above solution will work. – himeshp Jan 17 '20 at 09:41

score 0 · Answer 4 · answered Nov 02 '20 at 05:33

This one worked for me
signup.dart

import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';    

ScrollController _scrollController;                                 //<==  

class SignUpPage extends StatefulWidget {
  static String tag = 'SignUpPage';
  @override
  _SignUpPageState createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {

//Implementing scrollController by detecting keyboard               //<==
  bool scrolled = false;
  _scrollListener() {
    if (!scrolled && MediaQuery.of(context).viewInsets.bottom != 0) {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 100),
        curve: Curves.easeOut,
      );
      scrolled = true;
    }
    if (MediaQuery.of(context).viewInsets.bottom == 0) {
      scrolled = false;
    }
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
  }




  Widget build(BuildContext context) {
    .
    .
    //rest is same
    .
    .
}

Flutter TextField hidden by Keyboard, try many solution but not working

4 Answers4

Linked