When I load (build) the page I have to focus on a textFormField that already has input, but the cursos goes to the beginning of the textfield instead of going to the end of the input.
var _tCelular = TextEditingController();
my init()
_tCelular.text = "41";
Container txtCelular1() {
return Container(
margin: EdgeInsets.only(top: 16),
child: TextFormField(
controller: _tCelular,
autofocus: true,
style: TextStyle(
color: Colors.deepOrange,
fontSize: 18,
),
decoration: InputDecoration(
labelText: 'Celular',
hintText: '(__) _ ____-____',
labelStyle: TextStyle(
color: Colors.grey, fontSize: 18, fontWeight: FontWeight.bold),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(22),
),
errorStyle: TextStyle(fontSize: 18),
suffixIcon: IconButton(
onPressed: () {
_onTapBuscarDadosCliente();
},
icon: Icon(Icons.search),
),
),
focusNode: _focusNodeFone,
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
TelefoneInputFormatter(),
],
),
);
}
Since no one was able to help me, I found the answer.
I just had to add _tCelular.selection = TextSelection.collapsed(offset: _tCelular.text.length); after _tCelular.text = "41";
So, my initState is like:
_tCelular.text = ddd;
_tCelular.selection = TextSelection.collapsed(offset: _tCelular.text.length);
That worked for me.
Related
This question already has answers here:
How to show/hide password in TextFormField?
(14 answers)
Closed 14 days ago.
i'm new to flutter and I want a button like interaction which will make password visible and invisible.Can I do it inside TextFormField?
child:TextField(
obscureText: true,
style: TextStyle(
color:Colors.black87
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top:14),
prefixIcon: Icon(
Icons.lock,
color:Color(0xff992a32)
),
hintText: 'Şifre giriniz.',
hintStyle: TextStyle(
color:Colors.black38
)
),
)
Create bool variable isVisible:
bool isVisible = false;
setup TextFormField like this:
TextFormField(
obscureText: isVisible ,
style: const TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:const EdgeInsets.only(top: 14),
prefixIcon:const Icon(Icons.lock, color: Color(0xff992a32)),
suffixIcon: IconButton(
onPressed: () {
setState(() {
isVisible = !isVisible;
});
},
icon: Icon(
!isVisible ? Icons.visibility : Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
),
),
),
I am developing a mobile application with Flutter. I added a TextFormField to my app like this:
When I click on the icon, the process is running in the back-end. But there is not change in the view.
My codes:
TextFormField(
controller: _passwordController,
keyboardType: TextInputType.visiblePassword,
obscureText: SeePassword,
decoration: InputDecoration(
filled: true,
fillColor: Color.fromARGB(255, 232, 232, 232),
contentPadding: EdgeInsets.symmetric(vertical: 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
prefixIcon: Icon(Icons.lock, size: 20),
suffixIcon: GestureDetector(
child: SeePassword ? Icon(Icons.remove_red_eye) : Icon(Icons.highlight_off_sharp),
onTap: () {
SeePassword = !SeePassword;
print(SeePassword);
},
),
),
style: TextStyle(fontSize: 20, fontFamily: "Roboto Regular"),
),
How can I solve the problem?
onTap is missing setState to update the ui
onTap: () {
setState((){
SeePassword = !SeePassword;
});
},
I've often seen where fields are responsive when users are typing, giving realtime feedback. An example is when I'm typing confirm password or email, if the confirm password or email hasn't matched the password while typing it returns error by marking turning the border of the field red until it matches the correct input. I have written this code, how do I improve the code to be responsive as described.
Widget _buildConfirmPasswordTF() {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
// Text('Password', style: kLabelStyle,),
SizedBox(height: 10.0),
Container(alignment: Alignment.centerLeft, decoration: kBoxDecorationStyle, height: 60.0, child: TextFormField(
validator: ( confirmPassword ){
if ( confirmPassword.trim() != _password.isValidPassword ) {
return null;
} else {
return 'Password doesn\'t match';
}
},
obscureText: true, style: TextStyle(color: Colors.white, fontFamily: 'OpenSans',),
decoration: InputDecoration(border: InputBorder.none, contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(Icons.lock, color: Colors.white,),
hintText: 'Enter Confirm Password',
hintStyle: kHintTextStyle,
errorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red ) ),
focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red ) )
),
),
),
],
);
}
This is where I set the hintText
final kHintTextStyle = TextStyle(
color: Colors.white54,
fontFamily: 'OpenSans',
);
This is where I set the labelStyle
final kLabelStyle = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
);
This is where I set the border decoration
final kBoxDecorationStyle = BoxDecoration(
color: Color(0xFF6CA8F1),
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 2),
),
],
);
you need autovalidateMode: AutovalidateMode.onUserInteraction, pass this in textformfield.
You can do that with a Form() providing it a key and a autoValidateMode to make sure the fields have value or that the value is something you except, you can add another field to confirm the passwork or email and compare the value of the field in the onChanged with the value of the other email field to make sure they match.
import 'package:email_validator/email_validator.dart';
final formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
bool isValid = false;
_emailController.addListener(
() {
//With this, you can "listen" all the changes on your text while
//you are typing on input
//use setState to rebuild the widget
if (EmailValidator.validate(_emailController.text)) {
setState(() {
isValid = true;
});
} else {
setState(() {
isValid = false;
});
}
},
);
Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.105),
child: TextFormField(
validator: (value) =>
!EmailValidator.validate(value)
? 'Enter a valid email'
: null,
keyboardType: TextInputType.emailAddress,
textAlign: TextAlign.center,
controller: _emailController,
decoration: kInputDecoration.copyWith(
hintText: 'Enter your email'),
),
),
SizedBox(
height: 18,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.105),
child: TextFormField(
obscureText: true,
validator: (value) =>
value.isEmpty ? 'Enter your password' : null,
keyboardType: TextInputType.text,
textAlign: TextAlign.center,
controller: _passwordController,
decoration: kInputDecoration.copyWith(
hintText: 'Enter your password'),
),
),
],
),
),
I am just getting started with flutter widget testing and came upon this issue. I was wondering if this is expected behavior.
When trying to find my TextField with find.byType it succeeds but with find.byWidget it doesn't. Is this normal or am I doing something wrong? The goal is later to enter text in the textfield and tap a button after.
My textField and button:
Column(
children: [
TextField(
style: TextStyle(
color: Colors.black,
),
autofocus: true,
autocorrect: false,
enableSuggestions: false,
controller: _controller,
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: 'Fill in.....',
hintStyle: TextStyle(fontSize: 18),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
onSubmit(_controller.text);
},
child: Text('Press me!',
style: TextStyle(
fontSize: 18,
color: Theme.of(context).primaryColorBrightness ==
Brightness.dark
? Colors.white
: Colors.black,
))),
],),
],
),
And this is my test:
tester.ensureVisible(find.byType(TextInputWidget));
expect(find.byType(TextInputWidget), findsOneWidget);
final a = TextField(
style: TextStyle(
color: Colors.black,
),
autofocus: true,
autocorrect: false,
enableSuggestions: false,
controller: TextEditingController(),
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: 'Fill in.....',
hintStyle: TextStyle(fontSize: 18),
),
);
//expect(find.byWidget(a), findsOneWidget); // Fails
expect(find.byType(TextField), findsOneWidget); //Succeeds
Parts of your test are missing, but it looks like you are trying to find widget a in your tester where it is not known.
If you want to find a widget by its variable reference, you have to use the same reference when you define the widget that is then passed to pumpWidget() method like so:
final a = TextField(...);
tester.pumpWidget(Container(
child: a,
));
expect(find.byWidget(a), findsOneWidget);
How I can put the icon while typing the email to verifying from email regex and the strength of the password?
TextFormField(
controller: _emailController,
textAlign: TextAlign.end,
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 16),
hintText: "example#gmail.com",
fillColor: Colors.grey[200],
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
borderRadius: BorderRadius.circular(14))),
onSaved: (String value) {
email = value;
},
validator: _validateEmail,
keyboardType: TextInputType.emailAddress,
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Text(
"كلمة المرور",
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
),
new TextFormField(
controller: _passwordController,
textAlign: TextAlign.end,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
prefixIcon: new GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Padding(
padding:
const EdgeInsets.fromLTRB(20, 10, 0, 0),
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
color: visi),
)),
hintStyle: TextStyle(fontSize: 16),
hintText: "",
fillColor: Colors.grey[200],
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
borderRadius: BorderRadius.circular(14))),
onSaved: (String value) {
password = value;
},
validator: _validatePassword,
obscureText: !_obscureText,
),
For email, you can add a listener to your _emailController like:
var _myIcon = Icon.cancel;
void initState() {
super.initState();
// Start listening to changes.
_emailController.addListener(_checkEmail);
}
And then:
_checkEmail() {
bool emailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+#[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(_emailController.text);
if(emailValid)
setState(() {
_myIcon=Icons.ok;
});
}
Now add a prefixIcon to your email field with _myIcon value.
For a password with :
Minimum 1 Upper case
Minimum 1 lowercase
Minimum 1 Numeric Number
Minimum 1 Special Character
Common Allow Character ( ! # # $ & * ~ )
and based on this answer you can use a Regex like this:
RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!##\$&*~]).{8,}$').hasMatch(_passwordController.text);