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
<a href="https://stackoverflow.com/questions/50736571/when-i-select-a-textfield-the-keyboard