I was trying to make two cards with Expanded. Everything works fine except that the card is taking too much space in the bottom and won't stop when there is no more TextFormField.
This is my code and below there is a screenshot.
Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(
"Ajouter Un Nouveau Fournisseur",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.normal),
),
elevation: 10,
),
backgroundColor: Color(0xFFFFFFFE),
body: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.all(30),
child: Card(
color: Color(0xFFF5F5F5),
elevation: 20,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
child: Text(
'Informations Générales',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 1,
),
Form(
key: formKey,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Nom Du Fournisseur',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Siége Social',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Pays',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.location_on)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Ville/Région',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.location_city,
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Numéro de Téléphone',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.phone,
),
),
),
),
],
),
),
),
],
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.all(30),
child: Card(
color: Color(0xFFF5F5F5),
elevation: 20,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Container(
width: MediaQuery.of(context).size.width * 0.35,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
child: Text(
'Informations Financieres',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 1,
),
Form(
key: formKey,
autovalidateMode: AutovalidateMode.disabled,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Nom Du Fournisseur',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Siége Social',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Pays',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.location_on)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Ville/Région',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.location_city,
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Numéro de Téléphone',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.phone,
),
),
),
),
],
),
),
),
],
),
),
),
),
),
],
),
),
);
For every Column widget, use mainAxisSize: MainAxisSize.min,.
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
More about mainaxissize property.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(
"Ajouter Un Nouveau Fournisseur",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.normal),
),
elevation: 10,
),
backgroundColor: Color(0xFFFFFFFE),
body: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.all(30),
child: Card(
color: Color(0xFFF5F5F5),
elevation: 20,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
child: Text(
'Informations Générales',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 1,
),
Form(
key: formKey,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Nom Du Fournisseur',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Siége Social',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Pays',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.location_on)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Ville/Région',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.location_city,
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Numéro de Téléphone',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.phone,
),
),
),
),
],
),
),
),
],
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.all(30),
child: Card(
color: Color(0xFFF5F5F5),
elevation: 20,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Container(
width: MediaQuery.of(context).size.width * 0.35,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
child: Text(
'Informations Financieres',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 1,
),
Form(
key: formKey,
autovalidateMode: AutovalidateMode.disabled,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Nom Du Fournisseur',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Siége Social',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.perm_identity)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Pays',
//prefixIcon: Icon(Icons.email),
icon: Icon(Icons.location_on)),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Ville/Région',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.location_city,
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
child: TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Numéro de Téléphone',
//prefixIcon: Icon(Icons.email),
icon: Icon(
Icons.phone,
),
),
),
),
],
),
),
),
],
),
),
),
),
),
],
),
),
);
}
}
Related
I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
Scaffold(
appBar: AppBar(
leading: SizedBox(
width: 16,
child: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Splash()),
);
}),
),
title: const Text(
"Upload KYC",
style: TextStyles.header4,
),
backgroundColor: ColorPalette.grey2,
elevation: 0,
),
backgroundColor: ColorPalette.grey2,
body: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 45.h(), left: 20.w(), right: 20.w(), bottom: 20.h()),
child: Row(
children: <Widget>[
Expanded(
child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Personal Details",
style: TextStyles.subtitle04,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.azure,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"ID Proof",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Bank Details",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30.h(),
),
const Text(
"Enter Your Details",
style: TextStyles.header002,
),
SizedBox(height: 50.h()),
// KYC form
Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Align(
alignment: Alignment.topLeft,
child: Text(
'First Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your First Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please fill in your name';
}
firstName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Last Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Last Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please complete your name';
}
lastName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Email Address',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
onChanged: (_) {
emailExists = false;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter an email address';
}
if (!Constants().emailFilter.hasMatch(val)) {
return 'Please enter a valid email';
}
if (emailExists) {
return 'A user with this email already exists';
}
email = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Phone Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: 'Enter Your Phone Number',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
validator: (val) {
if (val!.length < 11 || val.length > 11) {
return 'Phone Number should be 11';
}
phoneNumber = val;
},
),
],
)),
const Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 50),
child: ConstrainedBox(
constraints: const BoxConstraints.expand(height: 54),
child: Align(
alignment: Alignment.bottomCenter,
child: RoundedLoadingButton(
color: ColorPalette.blue1,
width: (MediaQuery.of(context).size.width - 40),
controller: _btnController,
borderRadius: 12,
elevation: 0,
animateOnTap: false,
onPressed: () => Navigator.of(context)
.pushReplacementNamed(KYCIDProofScreen.routeName),
child: const Text('Next'),
),
),
),
),
],
),
),
),
],
),
);
Column wrap with SingleChildScrollView it will solve the overflow issue
How to auto resize TextField when you type in long messages like whatsapp?
Here is my TextField code:
Row(
children: [
Expanded(
flex: 1,
child: Icon(
Icons.tag_faces,
color: Colors.grey,
size: 30,
),
),
Expanded(
flex: 8,
child: TextField(
controller: inputTextController,
style: TextStyle(
color: Colors.black
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Type a message',
hintStyle: TextStyle(
color: Color(0xff99999B),
)
),
),
),
Expanded(
flex: 1,
child: IconButton(
icon: Icon(
Icons.camera_alt,
color: Colors.grey,
size: 30,
),
padding: EdgeInsets.all(0),
onPressed: () {
//print(inputTextController.text);
},
),
)
],
),
Tried using maxLines: null and it actually works for the text/message to auto entered but the textfield wouldn't resize vertically.
Below is my implementation:
Container(
margin: const EdgeInsets.only(top: 20, bottom: 8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(2),
),
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
maxWidth: MediaQuery.of(context).size.width,
minHeight: 25.0,
maxHeight: 100.0,
),
child: Scrollbar(
child: TextField(
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.done,
onSubmitted: (value) {
},
maxLines: null,
// focusNode: focusNode,
controller: _message,
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.symmetric(horizontal: 13, vertical: 13),
hintText: "Message(optional)",
hintStyle:
TextStyle(color: Colors.white24, fontSize: 14),
),
),
),
),
In the todoScreen, there is a container containing a column with two text fields, I want the container to change dynamically as the number of characters in the second text field increases, but the container just expands to the bottom. How do I solve this?
Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding:
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
child: Column(
children: [
TextField(
controller: titleEditingController,
autofocus: true,
autocorrect: false,
cursorColor: Colors.grey,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: "Title", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
const Divider(
color: Color(0xFF707070),
),
TextField(
controller: detailEditingController,
maxLines: null,
autocorrect: false,
cursorColor: Colors.grey,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: "Notes", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
)),
),
),
);
-> Use This Code You're Issue Solved
Ex:
body: SafeArea(
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding:
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
TextField(
controller: titleEditingController,
autofocus: true,
autocorrect: false,
cursorColor: Colors.grey,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: "Title", border: InputBorder.none),
style: TextStyle(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
const Divider(
color: Color(0xFF707070),
),
TextField(
controller: detailEditingController,
maxLines: null,
autocorrect: false,
cursorColor: Colors.grey,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: "Notes", border: InputBorder.none),
style:TextStyle(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
)),
),
),
),
I want to load an SVG image inside TextFormFieldin Flutter. I have used this SVG loading library.But everytime the svg image is displayed in center and TextFormField's hint text is not getting displayed. I want to load SVG at the end of TextFormField.
Here is my code:
Form(
key: _formKey,
child: Column(
children: [
new RectWithBorder(AppColors.white, AppColors.gray, 1.0, BorderRadius.circular(6.0), new EdgeInsets.all(0.0), new Padding(
padding: new EdgeInsets.all(10.0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: Strings.emailOrMobileText,
),
keyboardType: TextInputType.text,
controller: emailController,
validator: Utils.isValidEmailOrMobile,
onSaved: (String value){
this.email = value;
},
))),
new RectWithBorder(AppColors.white, AppColors.gray, 1.0, BorderRadius.circular(6.0), new EdgeInsets.fromLTRB(0, 10.0, 0, 0), new Padding(
padding: new EdgeInsets.all(10.0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: Strings.passwordText,
suffixIcon: new Padding(
padding: const EdgeInsets.all(5.0),
child: new SizedBox(
height: 20,
child: SvgPicture.asset("assets/images/invisible.svg"),
),
),
),
keyboardType: TextInputType.text,
obscureText: true,
validator: _validatePassword,
onSaved: (String value){
this.password = value;
},
),)
),
new RoundedButton(
title: Strings.loginButtonText.toUpperCase(),
backgroundColor: AppColors.accent,
radius: 6.0,
textStyle: new TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: AppColors.white),
textColor: AppColors.white, margin: new EdgeInsets.fromLTRB(0, 20, 0, 0), onPressed: (){
Utils.isConnectedToInternet().then((isConnected){
if(isConnected == null || !isConnected){
Utils.showSnackBar(context, Strings.noInternetConnection);
} else{
// _verifyCaptcha();
_executeLogin(email, password);
}
});
},),
new Container(
margin: new EdgeInsets.fromLTRB(0, 30.0, 0, 0),
child: new GestureDetector(
child: Text(
Strings.forgotPasswordText,
style: new TextStyle(
color: AppColors.primary,
fontSize: 15.0
),
),
))
],
),
),
but it displays SVG as below image
Any help what's wrong with this?
Replace your decoration code from here.
decoration: InputDecoration(
hintText: "Password",
isDense: true,
suffixIconConstraints: BoxConstraints(
minWidth: 2,
minHeight: 2,
),
suffixIcon: InkWell(
child: new Padding(
padding: const EdgeInsets.all(5.0),
child: new SizedBox(
height: 20,
child:
SvgPicture.asset("assets/images/invisible.svg"),
),
), onTap: () {}))
When I want to write some text in Textfield, the Keyboard closes my modal bottom sheet. I can't understand, why this is happening. I try to used this line of code:
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
But in output I get textfield, which stretches.
I spent a lot of time to solve this problem and I really want to close this issue.
This is full code
import 'package:flutter/material.dart';
class NutritionScreen extends StatefulWidget {
#override
_NutritionScreenState createState() => _NutritionScreenState();
}
class _NutritionScreenState extends State<NutritionScreen> {
double height = 500.0;
void _modalBottomSheetMenu(){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: height,
color: Colors.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Питание",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 26.0),
)),
Padding(
padding: EdgeInsets.only(
bottom: 8.0,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Возраст",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: 8.0,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Рост",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Целевой вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
],
)),
));
}
);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Питание',
style: new TextStyle(
color: Colors.white
),),
leading: IconButton(
icon:Icon(Icons.arrow_back),
color: Colors.white ,
onPressed:() => Navigator.of(context).pop(),
),
),
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(bottom: 45.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 200.0),
child: Text(
"Нажми на кнопку, чтобы добавить правильный рацион питания.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20.0),
)),
FloatingActionButton(
heroTag: "tag3",
backgroundColor: Color(0xffFF7070),
child: Icon(Icons.add, color: Colors.white),
onPressed: () {
_modalBottomSheetMenu();
}),
],
),
),
);
}
}
You don't need to wrap each filed with padding widget - simply wrap your primary Container with padding widget with-
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom)
.
Updated Code:
class NutritionScreen extends StatefulWidget {
#override
_NutritionScreenState createState() => _NutritionScreenState();
}
class _NutritionScreenState extends State<NutritionScreen> {
double height = 500.0;
void _modalBottomSheetMenu() {
showModalBottomSheet(
context: context,
builder: (builder) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: new Container(
height: height,
color: Colors
.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Питание",
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.black, fontSize: 26.0),
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Возраст",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Рост",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Целевой вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
],
)),
)),
);
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Питание',
style: new TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
onPressed: () => Navigator.of(context).pop(),
),
),
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(bottom: 45.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 200.0),
child: Text(
"Нажми на кнопку, чтобы добавить правильный рацион питания.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20.0),
)),
FloatingActionButton(
heroTag: "tag3",
backgroundColor: Color(0xffFF7070),
child: Icon(Icons.add, color: Colors.white),
onPressed: () {
_modalBottomSheetMenu();
}),
],
),
),
);
}
}
Modal Bottom Sheet which sticks to top of keyboard
MBS: Modal Bottom Sheet
In Container use margin for keyboard space and use padding for content.
This reduce height of MBS by keyboard height and stick MBS to top of keyboards (This can seen when keyboard opening or closing).
isScrollControlled: true for allow to change heigth of MBS
margin for giving empty space for keyboard with MediaQuery
padding optionel content padding
showModalBottomSheet(
isScrollControlled: true,
builder: (BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), // Keyboard margin
padding: const EdgeInsets.all(20) // Content padding
child: ... // You wiget tree
);
},
);