I have an authentication screen like this:
#override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Image.asset(
"assets/images/logo.png",
width: 132,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
AuthTextFormField(
icon: Icons.email_outlined,
labelText: 'Email',
keyboardType: TextInputType.emailAddress,
),
AuthTextFormField(
icon: Icons.lock_outline,
labelText: 'Password',
obscureText: true,
),
],
),
),
],
),
),
),
);
}
I have followed this answer, but it still did not work for me. The keyboard still covered the text field. Any idea?
Thank you.
[UPDATE]
I use the code written in the answer above (by Jay Jay). And, this is the screenshot:
Its covered like this:
This Code works fine for me, I have removed the image and added a Container on its place with some height.
Also I have made some changes to your Code,
Scaffold(
resizeToAvoidBottomPadding: true,
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Container(
color: Colors.blue,
height: 500,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: 'Password'),
obscureText: true,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
],
),
),
],
),
),
),
);
After trying it out, I think you should just add a height to your image.asset or better use a Container and specify the image in its decoration property and give the container a fixed height. It should all work correctly.
Here my code which works:
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Container(
height: 300,
color: Colors.red,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon:Icon(Icons.email),
labelText: 'Email'
),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: 'Password'
),
obscureText: true,
),
],
),
),
],
),
),
),
);
Related
I want to wrap the body inside a SingleChildScrollView widget but for some reason, it is not working. When I wrap the Container inside a SingleChildScrollView widget everything goes away. Any solution?
Scaffold(
body: Container(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Spacer(),
DisplayText(),
Spacer(),
Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
textInputAction: TextInputAction.next,
),
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your password',
),
),
],
),
),
.
.
.
.
],
),
),
);
You can wrap the entire layout with Column and expand the child using Expanded widget then add SingleChildScrollView. Please remove Spacer, if you need space in-between widgets use SizedBox instead.
Scaffold(
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10,),
DisplayText(),
SizedBox(height: 10,),
Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
textInputAction: TextInputAction.next,
),
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your password',
),
),
],
),
),
],
),
),
),
),
],
),
);
Error showing is
Invalid Matrix
I want my submit button and Cancel button as this is Form submission in flutter
My ScrollWidget is scrolling down but my SUBMIT and CANCEL Raised Buttons are getting invisible or not shown.
the code is as follows:
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.person_pin),
labelText: 'CompanyName',
hintText: 'Type the company Name',
),
),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
labelText: 'ModelName',
hintText: 'Type the Model Name',
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
keyboardType: TextInputType.number,
inputFormatters: [
WhitelistingTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
labelText: 'SerielNumber',
hintText: 'Type the Seriel Number',
prefixIcon: Icon(Icons.view_headline),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
color: Color(0xff476cfb),
onPressed: () {
Navigator.of(context).pop();
},
elevation: 4.0,
splashColor: Colors.blueGrey,
child: TextField(
maxLines: null,
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.place),
labelText: 'Cancel',
),
),
),
RaisedButton(
color: Color(0xff476cfb),
onPressed: () {
uploadPic(context);
},
elevation: 4.0,
splashColor: Colors.blueGrey,
child: TextField(
maxLines: null,
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.place),
labelText: 'Submit',
),
),
),
],
)
],
),
),
);
}
}
The problem is with your RaisedButton's Child. TextField must have bounded width.
you can use Text widget or Container widget as child of RaisedButton and use Row as child of Container to set title and icon like code below:
RaisedButton(
color: Color(0xff476cfb),
onPressed: () {
Navigator.of(context).pop();
},
elevation: 4.0,
splashColor: Colors.blueGrey,
child: Container(
child: Row(
children: [
Text('submit'),
Icon(Icons.place),
],
)),
),
I don't understood what's happening, but when the form got erros the helper text message is moving the TextFormField. I tried increasing the height but I could not fix.
Anyone knows what's happening?
Look the image:
Follow the code:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.centerRight,
child: CountryCodePicker(
showFlagMain: true,
onChanged: print,
initialSelection:
I18n.of(context).locale.countryCode,
favorite: ['+55', 'BR'],
showCountryOnly: false,
showOnlyCountryWhenClosed: false,
textStyle: TextStyle(
color: Colors.white, fontSize: 19.0),
flagWidth: 40.0,
)),
Container(
width: 200,
alignment: Alignment.center,
child: TextFormField(
keyboardType: TextInputType.phone,
controller: _phoneTextController,
inputFormatters: [
MaskTextInputFormatter(
mask: "(##) #####-####",
filter: {"#": RegExp(r'[0-9]')})
],
autocorrect: false,
autofocus: false,
style: TextStyle(
color: Colors.white, fontSize: 19.3),
cursorColor: Colors.yellow,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: '(99) 99999-9999',
filled: true,
hintStyle: TextStyle(color: Colors.grey)),
validator: (String value) =>
phoneValidator(value),
))
],
),
SizedBox(height: 20),
RaisedButton(
child: Text('Send'),
onPressed: () {
if (this._form.currentState.validate()) {
print(this._unmask(this._phoneTextController.text));
}
},
)
],
Thanks.
Try to wrap the container in an expanded widget.
You can modify the crossAxisAlignment of your Row to CrossAxisAlignment.start and the TextFormField widgets will be aligned when showing error text. A sample of this is below.
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 250,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return '$firstName must not be empty.';
}
return null;
},
controller: firstNameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: firstName,
),
),
),
Container(
width: 250,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return '$lastName must not be empty.';
}
return null;
},
controller: lastNameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: lastName,
),
),
)
]),
),
I am new into Flutter and at the moement I try to code my first App.
I just want to implement a screen with Text Fields - that worked.
Now I want to arrange the first two text field next to each other. I tried to use Row () and I got no errors, but suddenly the emulator shows me just a blank page.
Could someone tell me what I have to change? I don't know what I did wrong, because I do not get any errors.
Thanks for help!
import 'package:flutter/material.dart';
class TestEdit extends StatefulWidget {
#override
_TestEditState createState() => _TestEditState();
}
class _TestEditState extends State<TestEdit> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
//`true` if you want Flutter to automatically add Back Button when needed,
//or `false` if you want to force your own back button every where
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.pop(context, false),
),
),
body: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
//padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
children: <Widget>[
//Row(children:[
//crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputFirst',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputSecond',
),
),
),
],
),
//],
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
],
),
);
}
}
TextField widget will try to horizontally expand as much as possible.
So if you want to put an TextField in a Row, you should wrap it with Flexible(or Expanded) widget.
Try this,
class TestEdit extends StatefulWidget {
#override
_TestEditState createState() => _TestEditState();
}
class _TestEditState extends State<TestEdit> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
//`true` if you want Flutter to automatically add Back Button when needed,
//or `false` if you want to force your own back button every where
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.pop(context, false),
),
),
body: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
//padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
children: <Widget>[
//Row(children:[
//crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
Expanded( //TODO: Wrap with `Expanded`
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputFirst',
),
),
),
),
Expanded( //TODO: Wrap with Expanded
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputSecond',
),
),
),
),
],
),
//],
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
],
),
);
}
}
When ever you need add widgets vertically you need to add column and in horizontal way you need to add row. Both widgets contain children.
import 'package:flutter/material.dart';
class Beginner extends StatefulWidget {
#override
_BeginnerState createState() => _BeginnerState();
}
class _BeginnerState extends State<Beginner> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Text('A'),
Text('B'),
Text('C'),
],
),
Row(
children: [
Text('A'),
Text('B'),
Text('C'),
],
),
Row(
children: [
Text('A'),
Text('B'),
Text('C'),
],
),
Row(
children: [
Text('A'),
Text('B'),
Text('C'),
],
),
],
),
);
}
}
I'm trying to putting the country code before the phone number.
I usedcountry_pickers package but something gone wrong with my code,
my TextField's hintText visibility has gone, it's showing nothing
here is my widget
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: new Container(
padding: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)
),
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
prefix: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
onChanged: (value){
this.phoneNo=value;
},
),
),
),
here's widget method for country code
Widget _buildDropdownItem(Country country) => Container(
child: Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(
width: 8.0,
),
Text("+${country.phoneCode}(${country.isoCode})"),
],
),
);
The right way to use this is in Row widget. Prefix won't work here.
Row(
children: <Widget>[
Expanded(
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
),
onChanged: (value) {
// this.phoneNo=value;
print(value);
},
),
),
],
),