I have this TextFormFields in a scrollView. The top 2 TextFormFields allow the user to see what they are typing. However, on clicking the third TextFormField, the keyboard appears above the TextFormField and hides it so the user does not see what they are typing. How can I correct this.
On clicking the first one.
.
Clicking the Third One, it is hidden partially
Clicking the fourth, nothing can be seen at all. Keyboard obscures it
The Code I have
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Container(
height: 200.0,
width: double.infinity,
color: Colors.black,
),
Expanded(
child: SingleChildScrollView(
child: Form(
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: InputDecoration(
labelStyle: Theme.of(context).textTheme.subhead,
labelText: 'One',
contentPadding: EdgeInsets.all(15.0),
isDense: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: InputDecoration(
labelStyle: Theme.of(context).textTheme.subhead,
labelText: 'Two',
contentPadding: EdgeInsets.all(15.0),
isDense: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: InputDecoration(
labelStyle: Theme.of(context).textTheme.subhead,
labelText: 'Three',
contentPadding: EdgeInsets.all(15.0),
isDense: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
),
),
),
),
The normal default android keyboard used
Related
The onscreen keyboard is hiding my textfield eventhough I have set the resizeToAvoidBottomInset to true .I wrapped the whole body inside a SingleChildScrollView ,still its is not working.
What might be the reason? Below is my code :
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Center(
child: Column(
children: [
Padding(
padding: EdgeInsets.only(left: 30, right: 30, bottom: 16),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
decoration: BoxDecoration(
border: Border.all(color: Color(0xff331070)),
borderRadius: BorderRadius.circular(15),
),
child: TextField(
onChanged: (value) {
fullname = value;
},
decoration: const InputDecoration(
floatingLabelStyle: TextStyle(color: Colors.purple),
border: InputBorder.none,
prefixIcon: Icon(Icons.person),
labelText: 'Full Name',
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 30, right: 30, bottom: 16),
child: Container(
height: 100,
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
decoration: BoxDecoration(
border: Border.all(color: Color(0xff331070)),
borderRadius: BorderRadius.circular(15),
),
child: TextField(
inputFormatters: [LengthLimitingTextInputFormatter(100)],
onChanged: (value) {
about = value;
},
decoration: const InputDecoration(
floatingLabelStyle: TextStyle(color: Colors.purple),
border: InputBorder.none,
labelText: 'About',
),
) ],),), ], ), ),
);
}
just simple question, its the error like that is normal? or not?
that error is given when i backspace till the textfield have nothing left. i don't know what the cause of it
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextField(
controller: emailController,
cursorColor: Colors.white,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: 'Email', border: InputBorder.none),
),
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15.0, vertical: 2),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextField(
controller: passwordController,
cursorColor: Colors.white,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: 'Password', border: InputBorder.none),
),
),
),
),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 100),
child: ElevatedButton.icon(
style: ElevatedButton.styleFrom(
minimumSize: const Size.fromHeight(50),
),
icon: const Icon(
Icons.lock_open,
size: 20,
),
label: const Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: signIn,
),
),
truthfully all my textfield is acting like that, i don't know how to fix it. it should be looks like any normal textfield.
I'm trying to get this result, tried to extend the InputBorder and overriden the paint method to obtain what I want, but really struggling to get it working
You can get the same result bt wrapping the label text
TextFormField(
decoration: InputDecoration(
label: const Center(
child: Text(" Label Text"),
),
),
)
Or you can also use
floatingLabelAlignment: FloatingLabelAlignment.center,
If the Address text is a label, using FloatingLabelAlignment.center should work
TextFormField(
decoration: const InputDecoration(
label: Text(" Label Text"),
floatingLabelAlignment: FloatingLabelAlignment.center,
border: OutlineInputBorder(),
),
),
But, if that is the actual UI and need that every time, you could use a stack of Input field and the text.
Below is the example.
Stack(
children: [
Container(
margin: const EdgeInsets.only(top: 10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(50),
),
child: TextFormField(
decoration: const InputDecoration(
border: InputBorder.none,
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
color: Colors.white,
child: const Text("Some Text"),
),
),
],
),
Output:
I have a problem, when the textfield is tapped, the flutter keyboard opens up and it cover almost the whole the screen, including the TextField.
I've tried all the solutions I've seen online:
Wrapping the widget in a SingleScrollView
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
Set Scaffold to not resizeonBottom
Still, the keyboard is hiding the textField.
This is what I did:
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
[....................]
Padding(
padding: const EdgeInsets.all(8.0),
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height/2),
child: TextField(
style: TextStyle(
color: TheBaseColors.lightRed,
fontWeight: FontWeight.bold,
fontFamily: 'FoundersGrotesqueXCond',
),
onTap: () {},
textCapitalization: TextCapitalization.characters,
decoration: InputDecoration(
hintText: 'OCCUPATION',
hintStyle: TextStyle(fontSize: 20.0, color: Colors.blueGrey),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: TheBaseColors.lightRed),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: TheBaseColors.lightRed),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: TheBaseColors.lightRed),
),
),
),
),
),
],
),
);
}
}
Try wrap your single child in an scaffold and set the property resizeToAvoidBottomInset to true. So when you tap something in this page, the keyboard will push your page up to not cover your page.
Scaffold(
resizeToAvoidBottomInset: false,
child: ....
)
Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(13.0),
child: Row(
children: [
Expanded(
child: TextFormField(
controller: _msgController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 15.0),
border: OutlineInputBorder(
// width: 0.0 produces a thin "hairline" border
borderRadius: BorderRadius.all(Radius.circular(60.0)),
borderSide: BorderSide.none,
//borderSide: const BorderSide(),
),
hintStyle:
TextStyle(color: Colors.black, fontSize: 14.0),
filled: true,
fillColor: Colors.grey[300],
hintText: 'write here...'),
),
),
)
Add this
I want to increase the second TextField's height(Inside Stack). I have wrapped it in Container, and set the height to 500, but it doesn't make any difference.
class _ABC extends State<ABC>{
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Add Data'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.done),
onPressed: () {},
)
],
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
style: TextStyle(fontSize: 12.0),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(5.0))),
hintText: Localization.of(context).name,
labelText: Localization.of(context).name,
),
),
SizedBox(
height: 15.0,
),
Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 500.0,
child: TextField(
style: TextStyle(fontSize: 12.0),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(5.0))),
hintText: Localization.of(context).name,
labelText: Localization.of(context).name,
),
)),
Positioned(
left: 5.0,
child: Icon(Icons.camera),
)
],
)
])));
}
try to add below code inside TextFormField, you don't have to set the height to Container
TextFormField(
.......
keyboardType: TextInputType.multiline,
maxLines: 5,// change the value of maxlines according to your requirement
),
Output
The height of a TextField is set either with
1) Expand to fill it's holder with expands or
2) Set it to a fixed height in lines, with maxlines.
Here's what you need to fill the container:
Container(
width: double.infinity,
height: 500.0,
color: Colors.amber,
child: TextField(
expands: true,
maxLines: null,
style: TextStyle(fontSize: 12.0),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(5.0))),
hintText: Localization.of(context).name,
labelText: Localization.of(context).name,
),
),
)