Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

resizeToAvoidBottomPadding not working, Keyboard hides textform

resizeToAvoidBottomPadding (true and false) function not working,when textfield is tapped, the textform remains hidden behind.

Tried also with resizeToAvoidBottomInset (true and false) and nothing seems to work.

Here's my login page code

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: true,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              child: Stack(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.fromLTRB(15.0, 110.0, 0.0, 0.0),
                    child: Text('Cons',
                        style: TextStyle(
                            fontSize: 80.0, fontWeight: FontWeight.bold)),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(48.0, 175.0, 0.0, 0.0),
                    child: Text('Tech',
                        style: TextStyle(
                            fontSize: 80.0, fontWeight: FontWeight.bold)),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(220.0, 175.0, 0.0, 0.0),
                    child: Text('.',
                        style: TextStyle(
                            fontSize: 80.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  )
                ],
              ),
            ),
            Container(
                padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
                child: Column(
                  children: <Widget>[
                    TextField(
                      decoration: InputDecoration(
                          labelText: 'EMAIL',
                          labelStyle: TextStyle(
                              fontFamily: 'Montserrat',
                              fontWeight: FontWeight.bold,
                              color: Colors.grey),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.green))),
                    ),
                    SizedBox(height: 20.0),
                    TextField(
                      decoration: InputDecoration(
                          labelText: 'CONSTRASEÑA',
                          labelStyle: TextStyle(
                              fontFamily: 'Montserrat',
                              fontWeight: FontWeight.bold,
                              color: Colors.grey),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.green))),
                      obscureText: true,
                    ),
                    SizedBox(height: 5.0),
                    Container(
                      alignment: Alignment(1.0, 0.0),
                      padding: EdgeInsets.only(top: 15.0, left: 20.0),
                      child: InkWell(
                        child: Text(
                          'Reestablecer Contraseña',
                          style: TextStyle(
                              color: Colors.green,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Montserrat',
                              decoration: TextDecoration.underline),
                        ),
                      ),
                    ),
                    SizedBox(height: 40.0),
                    Container(
                      height: 40.0,
                      child: Material(
                        borderRadius: BorderRadius.circular(20.0),
                        shadowColor: Colors.greenAccent,
                        color: Colors.green,
                        elevation: 7.0,
                        child: InkWell(
                          onTap: () {},
                          child: Center(
                            child: Text(
                              'LOGIN',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: 'Montserrat'),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20.0),
                    Container(
                      height: 40.0,
                      color: Colors.transparent,
                      child: Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Colors.black,
                                style: BorderStyle.solid,
                                width: 1.0),
                            color: Colors.transparent,
                            borderRadius: BorderRadius.circular(20.0)),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Center(
                              child:
                                  ImageIcon(AssetImage('assets/facebook.png')),
                            ),
                            SizedBox(width: 10.0),
                            Center(
                              child: Text('Log in con facebook',
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontFamily: 'Montserrat')),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                )),
            SizedBox(height: 15.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'No tienes cuenta ?',
                  style: TextStyle(fontFamily: 'Montserrat'),
                ),
                SizedBox(width: 5.0),
                InkWell(
                  onTap: () {
                    Navigator.of(context).pushNamed('/signup');
                  },
                  child: Text(
                    'Registro',
                    style: TextStyle(
                        color: Colors.green,
                        fontFamily: 'Montserrat',
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                  ),
                )
              ],
            )
          ],
        ));
  }
}

Id like to tap the password field and have the whole scaffold to move upwards to let the user see whats currently being typed.

Heres my flutter doctor output.

[√] Flutter (Channel beta, v1.3.8, on Microsoft Windows [Version 10.0.17134.648], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.2)
[√] VS Code (version 1.32.3)
[√] Connected device (1 available)

• No issues found!
like image 341
Lucas Maccarini Avatar asked Mar 27 '19 03:03

Lucas Maccarini


People also ask

How do I fix my keyboard flutters?

Steps to fix Flutter keyboard resize screen issueStep 1: Open the page where you have the TextField widget. Step 2: Locate the Scaffold widget. Step 3: Inside the Scaffold widget, add the resizeToAvoidBottomInset property and set its value to false . Step 4: Re-run the app.

What is resizeToAvoidBottomInset?

Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears. Follow this answer to receive notifications. edited Jul 15, 2021 at 15:55.


2 Answers

Scaffold(
  resizeToAvoidBottomPadding: true,//deprecated

resizeToAvoidBottomPadding is deprecated after Flutter v1.1.9.


Scaffold(
    resizeToAvoidBottomInset: true,//use this

Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears.

enter image description here

like image 89
Imran Bajwa Avatar answered Dec 23 '22 15:12

Imran Bajwa


Wrap the first Column inside SingleChildScrollView to allow scrolling.

 body: SingleChildScrollView(
       child: Column(
       ...
like image 37
diegoveloper Avatar answered Dec 23 '22 15:12

diegoveloper