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

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 {

      @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: [
                Expanded(
                  child: signUpCardUI(context),
                ),
              ],
            )
          ),
        );
      }
    }

    Widget signUpCardUI(BuildContext context){
      return SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            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: [
                    Container(
                      height: MediaQuery.of(context).size.height / 1.5,
                      width: MediaQuery.of(context).size.width,
                      padding: EdgeInsets.only(top: 60),
                      child: Column(
                        children: [
                          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: [
                                  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 :)