I have an OTP page but the borders made for the input fields does not fill the parent containers.
I made the container color grey and the focused border pink, but it does not fit the height.
Please what am I missing in my code;
Widget _textFieldOTP(BuildContext context, {required bool first, last}) {
return Container(
height: 54,
width: 53,
color: Colors.grey,
child: TextFormField(
autofocus: true,
onChanged: (value) {
if(value.length == 1 && last == false){
FocusScope.of(context).nextFocus();
}
if(value.length == 0 && first == false){
FocusScope.of(context).previousFocus();
}
},
showCursor: false,
readOnly: false,
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
keyboardType: TextInputType.number,
maxLength: 1,
decoration: InputDecoration(
counter: Offstage(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
borderRadius: BorderRadius.circular(6),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0xFFFF2957)),
borderRadius: BorderRadius.circular(6),
),
),
),
);
}
}
Issue raise from counter, also can remove offset.
Include counterStyle: TextStyle(height: double.minPositive), and counterText=""
decoration: InputDecoration(
counterStyle: TextStyle(height: double.minPositive),
counterText: "",
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
borderRadius: BorderRadius.circular(6),
),
Widget _textFieldOTP(BuildContext context, {required bool first, last}) {
return Container(
height: 54,
width: 53,
color: Colors.grey,
child: TextFormField(
autofocus: true,
onChanged: (value) {
if (value.length == 1 && last == false) {
FocusScope.of(context).nextFocus();
}
if (value.length == 0 && first == false) {
FocusScope.of(context).previousFocus();
}
},
showCursor: false,
readOnly: false,
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
textStyle: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
keyboardType: TextInputType.number,
maxLength: 1,
decoration: InputDecoration(
counterStyle: TextStyle(height: double.minPositive),
counterText: "",
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
borderRadius: BorderRadius.circular(6),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0xFFFF2957)),
borderRadius: BorderRadius.circular(6),
),
),
),
);
}
Related
I have wrapped a container and a sizedbox around the textform field to fit the error message in the container but its keeps resizing the widget.
Container(
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: BorderRadius.circular(10.0),
),
height: 73,
width: 396,
child: Center(
child: TextFormField(
keyboardType: TextInputType.number,
onSaved: (Value) => print(phonenumber),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 00.0),
isDense: true,
hintStyle: TextStyle(
fontFamily: "Proxima Nova",
fontWeight: FontWeight.w300,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
//color: Colors.amber,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(width: 1, color: Colors.transparent),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
),
// labelText: '',
),
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(
r'^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{5})(?: *x(\d+))?\s*$'),
)
],
controller: phonenumber,
validator: (value) {
if (value != null && value.isEmpty) {
return 'Kindly register with another number or Log In';
} else
return null;
},
),
),
),
i wrapped a container around the textformfield and a sizedbox around the textformfield but,the error message keeps resizing the container.
Please remove container height , this is causing shrink.
As the image is shown below, the first image displays my text field before I click on it. the second image displays how it displays when after start typing and clicking on it. I want to remove that label text display while typing. how can I do that?
TextFormField(
controller: usernameEditingController,
decoration: InputDecoration(
fillColor: textWhite,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
labelText: "User Name",
labelStyle: TextStyle(
fontSize: 15,
color: textdarkBlue,
),
hintText: "ex: James",
hintStyle: TextStyle(
color: textdarkBlue,
fontFamily: "Paralucent",
fontSize: 14)),
style: TextStyle(
color: textdarkBlue,
),
validator: (text) {
if (text!.isEmpty) {
return "Username can't be empty";
} else {
return null;
}
},
onChanged: (String? text) {
userName = text!;
//print(userName);
},
),
It is displaying as OutlineInputBorder's behavior.
There are few different ways, One is using FocusNode, goal is to provide labelText:null on focus change.
String userName = "";
late FocusNode focusNode = FocusNode()
..addListener(() {
setState(() {});
});
.....
TextFormField(
// controller: usernameEditingController,
focusNode: focusNode,
decoration: InputDecoration(
labelText: focusNode.hasFocus ? null : "User Name",
That is the behaviour of labelText property if you don't want it , simply remove it and use hintText instead
TextFormField(
controller: usernameEditingController,
decoration: InputDecoration(
fillColor: textWhite,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
hintText: "ex: James",
hintStyle: TextStyle(
color: textdarkBlue,
fontFamily: "Paralucent",
fontSize: 14)),
style: TextStyle(
color: textdarkBlue,
),
validator: (text) {
if (text!.isEmpty) {
return "Username can't be empty";
} else {
return null;
}
},
onChanged: (String? text) {
userName = text!;
//print(userName);
},
),
How to change for the TextFormField underline error color? When validator returns not null the underlying color for the text field is getting red (when theme brightness is dark).
TextFormField(
decoration: InputDecoration(
labelText: AppLocalizations.key(context, 'formPassword'),
icon: Icon(Icons.lock
hintText: AppLocalizations.key(context, 'enterYourPassword'),
),
validator: (val) {
val = val.trim();
if (validatePassword(val) == false) {
return AppLocalizations.key(context, 'passwordNotAccepted');
}
password = val;
return null;
},
initialValue: '',
onSaved: (val) => {},
keyboardType: TextInputType.visiblePassword,
obscureText: true,
),
Please refer below code
class MainScreen extends StatelessWidget {
MainScreen({Key key}) : super(key: key);
final TextEditingController addressController = TextEditingController();
final FocusNode addressFocus = FocusNode();
int validateAddress(String address) {
String patttern = r'(^[a-zA-Z0-9 ,.-]*$)';
RegExp regExp = new RegExp(patttern);
if (address.isEmpty || address.length == 0) {
return 1;
} else if (address.length < 10) {
return 3;
} else {
return 0;
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
automaticallyImplyLeading: true,
leading: Icon(
Icons.arrow_back,
),
title: Text("Example"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(15.0),
child: Center(
child: TextFormField(
autovalidate: true,
controller: addressController,
inputFormatters: [
FilteringTextInputFormatter.deny(RegExp(r"\s\s")),
FilteringTextInputFormatter.deny(RegExp(
r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])')),
],
keyboardType: TextInputType.text,
maxLength: 60,
onChanged: (val) {},
maxLines: 1,
validator: (value) {
int res = validateAddress(value);
if (res == 1) {
return "Please enter address";
} else if (res == 3) {
return "Please enter minimum 10 characters";
} else {
return null;
}
},
focusNode: addressFocus,
autofocus: false,
decoration: InputDecoration(
errorMaxLines: 3,
counterText: "",
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
)),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
),
),
hintText: "Hint Text" ?? "",
),
),
)),
);
}
}
Try below code hope its help to you.
InputDecoration(
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.amber,
),
),
errorStyle: TextStyle(
color: Colors.blue,
),
),
Your complete widget.
TextFormField(
validator: (value) {
if (value!.isEmpty) {
return 'Please Enter Brand Name';
}
return null;
},
decoration: InputDecoration(
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.amber,
),
),
errorStyle: TextStyle(
color: Colors.blue,
),
border: OutlineInputBorder(),
labelText: 'Brand Name',
hintText: 'Brand Name',
),
),
Your Screen->
I have this TextFormField and i am working on implementing a LogIn/Registration screen. The problem is that when the Validator pops the error onto the screen the borders of the TextFormField change from rounded edges to square shaped. What can i do to just print out the error? I was thinking about printing everything above or below the entire form, but what about a way to do it with the Valdiator property?
Or is there a more effective way to do it?
It also seems that the ListView in which the TextFormField resides gets destroyed in the process making it very annoying to type after the validator gets printed out on the screen.
beforeValidator
afterValidator
Just the TextFormField:
TextFormField(
validator: (String str) =>
str.isEmpty ? 'Enter a username' : null,
decoration: InputDecoration(
hintText: 'theChadMaster76',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
//focusBorder changes or not when user first clicks on the field
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons
.account_circle), //make the icon also change its color
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
userName = str;
});
},
),
Entire file:
class RegistrationScreen extends StatefulWidget {
static const String id = 'registration_screen';
#override
_RegistrationScreenState createState() => _RegistrationScreenState();
}
class _RegistrationScreenState extends State<RegistrationScreen> {
final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>();
bool loading = false;
String error = '';
String userName = "";
String email = "";
String password = "";
#override
Widget build(BuildContext context) {
return loading ? Loading() : Scaffold(
appBar: AppBarModel(),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Center(
child: Form(
key: _formKey,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 50.0),
child: Center(child: Text('add logo')),
),
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
'Username:',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
//fontStyle: FontStyle.italic,
),
),
),
TextFormField(
validator: (String str) =>
str.isEmpty ? 'Enter a username' : null,
decoration: InputDecoration(
hintText: 'theChadMaster76',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons
.account_circle), //make the icon also change its color
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
userName = str;
});
},
),
SizedBox(height: 30.0),
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
'Email:',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
//fontStyle: FontStyle.italic,
),
),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
validator: (String str) =>
str.isEmpty ? 'Enter an email' : null,
decoration: InputDecoration(
hintText: 'bobbyBob#gmail.com',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon:
Icon(Icons.mail),
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
email = str;
});
},
),
SizedBox(height: 30.0),
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
'Password:',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
//fontStyle: FontStyle.italic,
),
),
),
TextFormField(
validator: (String str) =>
str.length < 6 ? 'Enter an password 6+ char' : null,
obscureText: true,
decoration: InputDecoration(
hintText: 'secretPassword123!',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons.memory),
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
password = str;
});
},
),
SizedBox(
height: 50.0,
),
Center(
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.green.shade400),
),
color: Colors.green.shade400,
textColor: Colors.grey.shade300,
padding:
EdgeInsets.symmetric(horizontal: 120.0, vertical: 10.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'SUBMIT',
style: TextStyle(
fontSize: 18.0,
letterSpacing: 4.0,
fontStyle: FontStyle.italic,
),
),
),
onPressed: () async {
if (_formKey.currentState.validate()) {
setState(() {
loading = true;
});
dynamic result = await _auth.registerWithEmailPassUser(
email, password);
if (result == null) {
setState(() {
loading = false;
error = "please supply a valid email";
});
}
}
},
),
),
],
),
),
),
),
);
}
}
you just need to override the errorBoder style as well, like the way you did for focusedBorder,enabledBorder. below is the code snippet.
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
)
and your final TextFormFiled should look like
TextFormField(
validator: (String str) =>
str.isEmpty ? 'Enter a username' : null,
decoration: InputDecoration(
hintText: 'theChadMaster76',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons
.account_circle), //make the icon also change its color
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
userName = str;
});
},
)
You have to specify the errorBorder & focusedErrorBorder as well:
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
),
Refer InputDecoration for all the available options.
I am using form and TextFormField to get data from user :
child: TextFormField(
keyboardType: TextInputType.number,
enabled: item.editable,
autofocus: false,
maxLines: 1,
textAlign: TextAlign.right,
controller: TextEditingController()
..text = item.value == null
? ""
: replaceFarsiNumber(
item.value.substring(3, 5)),
validator: (val) {
if (val.length < 2) {
return "دورقمی وارد کنید";
}
return null;
},
onChanged: (_) => _form.currentState.validate(),
decoration: InputDecoration(
labelText: "دقیقه",
labelStyle:
TextStyle(color: color_raisedButton_active),
errorStyle: TextStyle(height: 0),
border: OutlineInputBorder(
borderSide: BorderSide(
color: color_raisedButton_active,
width: 1.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: color_raisedButton_active,
width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: color_raisedButton_active,
width: 1.0),
),
errorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.red, width: 1.0),
),
contentPadding: EdgeInsets.only(
left: 5.0,
top: 0.0,
right: 5.0,
bottom: 0.0),
),
),
I add a validator to count number of word that user added to TextFormField. under some situation i want to show error like this to user:
How can i change the error label position to below of TextFormField