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!
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.
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.
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.
Wrap the first Column
inside SingleChildScrollView
to allow scrolling.
body: SingleChildScrollView(
child: Column(
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With