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

Answer 1

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(
        .
        .
        .

Answer 2

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

Answer 3

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 :)

Answer 4

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
    .
    .
}