Related
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.
When I click on the TextField, my cursor and the text I type in the text field are not displayed. It seems that I do everything as always, but for some reason nothing is displayed. Please tell me what could be my mistake?
body
Padding(
padding: const EdgeInsets.symmetric(horizontal: 13),
child: SizedBox(
height: 45,
child: MySearchWidget(
onChanged: (value) => _runFilter(value),
),
),
),
MySearchWidget
Widget build(BuildContext context) {
return Row(
children: [
IconButton(
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
onPressed: () {
_onBackPressed(context);
},
icon: SvgPicture.asset(
constants.Assets.arrowLeft,
),
),
const SizedBox(
width: 14,
),
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: constants.Colors.greyDark,
),
child: TextFormField(
onChanged: onChanged,
style: constants.Styles.textFieldTextStyleWhite,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 15,
),
border: InputBorder.none,
prefixIcon: Align(
alignment: Alignment.centerLeft,
child: SvgPicture.asset(
constants.Assets.search,
width: 20,
height: 20,
),
),
),
),
),
),
],
);
}
Remove the Align widget wrapping your prefixIcon.
TextFormField(
onChanged: onChanged,
style: constants.Styles.textFieldTextStyleWhite,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 15,
),
border: InputBorder.none,
prefixIcon: FittedBox(
fit: BoxFit.scaleDown,
child: SvgPicture.asset(
'assets/svg/logo.svg',
width: 20,
height: 20,
),
),
),
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 am trying to design the ui page and i successfully reduces the width of bottomnavigationbar buy using padding on left and right. But the problem is if i reduces the with of bottomnavigationbar then it is take space at each corner of navigationbar which is in second image (black arrow). Below i have added the code and two images,the first image is the image from adobe xd which i trying to achieve this and second image is after trying to reduce the width of bottomnavigationbar.
class _SettingsState extends State<Settings> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.yellow,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 65.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "اسمك (اسم صفحتك)",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "التصنيف",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "حساب تويتر",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.number,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "حساب انستقرام",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "موقع الكتروني",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "وصف",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 25.0,left: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'مشاركة صفحتي',
style: TextStyle(
color: Colors.redAccent, fontSize: 18.0,
decoration: TextDecoration.underline,),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: MaterialButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0),
),
minWidth: 280.0,
height: 47.0,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home1()));
},
textColor: Colors.white,
color: Colors.redAccent,
child: Text(
'تسجيل خروج ',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25.0),
),
),
),
],
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 50.0,right: 50.0),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40)))),
child: BottomNavigationBar(
backgroundColor: Colors.grey[200],
currentIndex: 3,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.search,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.star_border,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline,color: Colors.redAccent,size: 35.0,),
title: Text(''),
),
],
),
),
),
);
}
The vertical unwanted space is because the Text() widget.
Please try changing this, inside each BottomNavigationBarItem
Replace your --> title: Text('')
With this --> title: Container()
To reduce or increase the left and right space in the bottomNavigationBar, change the values of Padding() like
Padding(padding: const EdgeInsets.only(left: 10.0,right: 10.0),
Following is my code where I am trying to add form TextFormField with decoration as seen in mock:
Rounded border
Background colour to grey
First email and then password with text not visible
Where password field will have show button to make password visible
finally a rounded submit button
MOCK:
CODE:
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
fillColor: Colors.grey,
focusColor: Colors.grey
),
validator: (value) {
if (value.isEmpty) {
return 'Your email';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
fillColor: Colors.grey,
focusColor: Colors.grey
),
validator: (value) {
if (value.isEmpty) {
return 'Your password';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}
EDIT:
How to change color of this label ?
You can use borderRadius in OutlineInputBorder to make it roundable.
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Form(
child: Column(
key: _formKey,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: new BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15, top: 5),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Email',
))))),
Padding(
padding: EdgeInsets.all(10),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: new BorderRadius.circular(10.0),
),
child: Padding(
padding:
EdgeInsets.only(left: 15, right: 15, top: 5),
child: TextFormField(
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Your password',
)))),
Positioned(
right: 15,
child: RaisedButton(
onPressed: () {
// _controller.clear();
},
child: Text('SHOW')))
],
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
color: Colors.green,
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
),
)),
],
),
));
}
Output
Edit
You can change the border color when it is clicked
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Form(
child: Column(
key: _formKey,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: TextField(
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Username',
filled: true,
fillColor: Colors.grey,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(10),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
TextField(
obscureText: true,
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'password',
filled: true,
fillColor: Colors.grey,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
),
Positioned(
right: 15,
child: Container(
width: 65,
height: 30,
child: RaisedButton(
onPressed: () {
// _controller.clear();
},
child: Text(
'SHOW',
style: TextStyle(fontSize: 8),
))))
],
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
color: Colors.green,
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
),
)),
],
),
));
}
Output
Container(
padding:EdgeInsets.only(top:20,right:10,left:10),
child:Card(
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(20),
),
color:Colors.grey,
child: Container(
padding:EdgeInsets.only(left:12),
child: TextFormField(
decoration:InputDecoration(
hintText:"You phone number here...",
border:InputBorder.none,
fillColor:Colors.white,
),
),
),
),
),