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: () {}))
Related
I'm trying to get an expandableTextFormField in bottomNavBar that will automatically increase in height as the user types into a new line. In my bottomNavBar code below, I gave the container a height of 60px so it doesn't take up the whole screen.
bottomNavigationBar: SafeArea(
child: Container(
height: 60,
color: Colors.white,
margin: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
padding: const EdgeInsets.only(
left: 12,
right: 8,
),
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(url),
radius: 15,
),
Flexible(
child: Padding(
padding: const EdgeInsets.only(
left: 16,
right: 8,
top: 2,
bottom: 2,
),
child: TextFormField(
expands: true,
maxLines: null,
minLines: null,
style: TextStyle(
fontSize: 14,
),
textCapitalization: TextCapitalization.sentences,
controller: commentEditingController,
decoration: InputDecoration(
filled: true,
fillColor: Color(0x27AFAFAF),
hintText: 'Comment as $displayName...',
hintStyle: TextStyle(color: Color(0xFFAFAFAF)),
),
),
),
),
InkWell(
onTap: () {
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 8, horizontal: 8),
child: const Text(
'Post',
style: TextStyle(color: Colors.blue),
),
),
)
],
),
);
},
),
),
I also attached a screenshot for more explanation of what I'm talking about:
here's 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,//min height you want to take by container
maxHeight: 100.0,//max height you want to take by container
),
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),
),
),
),
),
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),
),
),
),
),
When I want add More Text in Text Field it showing me blank any solutions for this how can I get solutions
Thank You
[![enter image description here][1]][![enter image description here][2]][2]
Before Add More Text in Text Field
[1]: https://i.stack.imgur.com/u4roj.png
After Add More Text in Text Field it Showing Blank
[2]: https://i.stack.imgur.com/VgkWP.png
here is my Code
Table(
border: TableBorder.all(color: Colors.black),
columnWidths: {
0: FlexColumnWidth(2),
1: FlexColumnWidth(1),
2: FlexColumnWidth(1),
3: FlexColumnWidth(3),
},
children: List.generate(bleachingProcessColumn, (index) {
if (index == 0) {
return TableRow(children: [
SizedBox(
height: 25.0,
child: Center(
child: Text(
"Chemical",
style: tableTextStyle,
),
),
),
SizedBox(
height: 25.0,
child: Center(
child: Text(
"GPL",
style: tableTextStyle,
),
),
),
SizedBox(
height: 25.0,
child: Center(
child: Text(
"QTY(KG.)",
style: tableTextStyle,
),
),
),
SizedBox(
height: 25.0,
child: Center(
child: Text(
"Process",
style: tableTextStyle,
),
),
)
]);
}
return TableRow(children: [
Container(
height: 50.0,
padding: EdgeInsets.symmetric(horizontal: 3.0, vertical: 5.0),
child: FormField(builder: (FormFieldState<int> state) {
return InputDecorator(
decoration: InputDecoration(
border: InputBorder.none,
),
child: TextFormField(
controller: chemicalNameController,
decoration: InputDecoration(
border: InputBorder.none,
),
),
);
}),
),
Container(
height: 50.0,
padding: EdgeInsets.symmetric(horizontal: 3.0, vertical: 5.0),
child: FormField(builder: (FormFieldState<int> state) {
return InputDecorator(
decoration: InputDecoration(
border: InputBorder.none,
),
child: TextFormField(
controller: GPLCrontroller,
decoration: InputDecoration(
border: InputBorder.none,
),
),
);
}),
),
Container(
height: 50.0,
padding: EdgeInsets.symmetric(horizontal: 3.0, vertical: 5.0),
child: FormField(builder: (FormFieldState<int> state) {
return InputDecorator(
decoration: InputDecoration(
border: InputBorder.none,
),
child: TextFormField(
controller: qtyController,
decoration: InputDecoration(
border: InputBorder.none,
),
),
);
}),
),
Container(
height: 50.0,
padding: EdgeInsets.symmetric(horizontal: 3.0, vertical: 5.0),
child: FormField(builder: (FormFieldState<int> state) {
return InputDecorator(
decoration: InputDecoration(
border: InputBorder.none,
),
child: TextFormField(
controller: processController,
decoration: InputDecoration(
border: InputBorder.none,
),
),
);
}),
),
]);
}),
),
I want to make a change password in my app using mysql but i dont know how to get the specific logged in id to change my password i have a dash board i am using cards on it so when i click the card with a name change password it will redirect
to this page i am using a mysql for my localdatabase.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text('Change Password'),
backgroundColor: Color(0xff083663),
),
body: Form(
key: _key,
child: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 30.0,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Change Password',
style: TextStyle(
fontSize: 18.0, fontWeight: FontWeight.w900),
)
],
),
),
),
SizedBox(
height: 10.0,
),
//This is the field where you will enter the Current Password
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: TextFormField(
validator: (e) {
if (e.isEmpty) {
return "Please Enter Current Password";
}
return null;
},
obscureText: _secureText1,
onSaved: (e) => c1 = e,
decoration: InputDecoration(
labelText: 'Current Password',
suffixIcon: IconButton(
onPressed: showHide,
icon: Icon(_secureText1
? Icons.visibility_off
: Icons.visibility),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff083663),
)),
border: OutlineInputBorder()),
),
),
SizedBox(
height: 10.0,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: TextFormField(
validator: (e) {
if (e.isEmpty) {
return "Please Enter New Password";
}
return null;
},
obscureText: _secureText2,
onSaved: (e) => c2 = e,
decoration: InputDecoration(
labelText: 'New Password',
suffixIcon: IconButton(
onPressed: showHide2,
icon: Icon(_secureText2
? Icons.visibility_off
: Icons.visibility),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff083663),
)),
border: OutlineInputBorder()),
),
),
// this is the field for the verify password
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: TextFormField(
validator: (e) {
if (e.isEmpty) {
return "Verify Password";
}
return null;
},
onSaved: (e) => c3 = e,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Verify Password',
suffixIcon: IconButton(
onPressed: showHide3,
icon: Icon(_secureText3
? Icons.visibility_off
: Icons.visibility),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff083663),
)),
border: OutlineInputBorder()),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: Divider(),
),
SizedBox(
height: 20.0,
),
Container(
height: 50,
width: 250,
child: RaisedButton(
onPressed: () {
check();
},
color: Color(0xffb5171d),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0))),
textColor: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.vpn_key,
color: Colors.white,
),
Text(
'Save Changes',
style: TextStyle(fontSize: 15),
),
SizedBox(
height: 20,
)
],
),
),
),
],
),
),
),
);
}
}