Currently I am working on login screen.
Below is how my screen must work.
User have 2 options to login/register. With email or mobile number.
User can select how they want to login/register from the option given on the screen.
All my TextFormFields are getting displayed as per the choice made by user (they are not visible together).
So, the difficulty I am facing here is my TextFormFields are not getting focused as per user selection. Default focus must be on mobile number field which is working fine but when user selects email option then focus is not going on email textbook and that's why keyboard also not getting displayed.Same happening with passport textbox which must be focused once user enters email address.
I have attached video link for more clarity.
https://drive.google.com/file/d/1GbOeJhftI4hIkT4RTROoQ1DoYRoWh5gu/view?usp=sharing
below is the code for all 3 Textformfields.Same code for other two textfields with controller and focus node diffrent.
final emailInputController = TextEditingController();
final mobileInputController = TextEditingController();
final passwordInputController = TextEditingController();
final emailFocusNode = FocusNode();
final mobileFocusNode = FocusNode();
final passwordFocusNode = FocusNode();
TextFormField(
autofocus: true,
focusNode: passwordFocusNode,
onFieldSubmitted: (a) {
_handleSubmittedMobile(a);
},
keyboardType: TextInputType.text,
controller: passwordInputController,
style: TextStyle(
fontSize: 20.0,
color: Theme.of(context)
.primaryColorDark,
fontWeight: FontWeight.bold,
),
)),
TextFormField(
autofocus: true,
focusNode: mobileFocusNode,
onFieldSubmitted: (a) {
_handleSubmittedMobile(a);
},
keyboardType: TextInputType.text,
controller: mobileInputController,
style: TextStyle(
fontSize: 20.0,
color: Theme.of(context)
.primaryColorDark,
fontWeight: FontWeight.bold,
),
)),
TextFormField(
autofocus: true,
focusNode: emailFocusNode,
onFieldSubmitted: (a) {
_handleSubmittedMobile(a);
},
keyboardType: TextInputType.text,
controller: emailInputController,
style: TextStyle(
fontSize: 20.0,
color: Theme.of(context)
.primaryColorDark,
fontWeight: FontWeight.bold,
),
)),
How i can achieve this working?
thanks in advance.
Related
i have a problem :( I have a Detailform with Text Widget wehre im getting values from my DB.
I have one TextFormField with a controller, because i need to set the actual price, after i submitted it, the new value will updated in a TextValueField, but i want it to show on a normal Text widget.
i hope you can understand my problem. but here my code
TextField(
decoration: InputDecoration(labelText: 'actual cost'),
controller: _profitController,
keyboardType:
TextInputType.numberWithOptions(decimal: true),
onSubmitted: (val) {
double amount =
double.parse(selectedEntry.amount); // 1 value
double aktPrice =
double.parse(val); // 2 value from this textfield
double profit = aktPrice * amount; // calc
_endProfitController.text = profit.toString();
newProfit = profit;
},
),
TextFormField(
readOnly: true,
decoration: InputDecoration(labelText: "profit"),
controller:
_endProfitController, //this is getting updated with the controller
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
Text(
'test profit: ' +
_endProfitController.text.toString() + newProfit.toString() +
' €', // this is not getting updated, and newProfit says "Null"...
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
alright, how can i get the value in my Text Widget ?
I tried to setState in the onSubmitted but then the controller also isn't updating.
I tried to declare a new double newProfit but after submit it still gives me null back....
hope someone can help me :)
best regards
And thanks for your time :)
Its not updating because the widgets are already built when you change the text value of the controller if you are creating the form inside a stateful widget you can call setState() inside the onChanged so the value of the field updates the String you'll use to show the text, something like this.
TextFormField(
decoration: InputDecoration(labelText: "profit"),
controller:
_endProfitController, //this is getting updated with the controller
textAlign: TextAlign.left,
onChanged: (value) {
setState(() {
valueText = _endProfitController.text;
});
print(valueText);
},
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
Text(
'test profit: ' +
valueText +
' €', // this is not getting updated, and newProfit says "Null"...
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
The variable that will get the value of the controller's text has to be outside the build method
String valueText = '';
If you are not building this inside a stateful widget you can look at the Provider package to update a value that has no state
I am using widget called InternationalPhoneNumberInput() (which seems like TextField) to validate phone numbers.But when I focus on the widget, the keyboard appears and disappears automatically.
You can see the widget code below.
Widget buildNumber(BuildContext context) {
PhoneNumber number = PhoneNumber(isoCode: 'TG');
List<String> county= ['TG'];
return
InternationalPhoneNumberInput(
keyboardAction: TextInputAction.next,
onSubmit:()=> myFocusNodeEmail.requestFocus(),
ignoreBlank: true,
autoValidate: true,
inputBorder: InputBorder.none,
textStyle: TextStyle(
fontFamily: "WorkSansSemiBold",
fontSize: 16.0,
color: Colors.black),
countries: county,
errorMessage: 'Numéro invalide',
initialValue: number,
hintText: 'Téléphone',
focusNode: myFocusNodeTelephone,
textFieldController: signupTelephoneController,
);}
Ohh yes!!I solved it simply by upgrading the widget from intl_phone_number_input: ^0.4.1+1 to intl_phone_number_input: ^0.4.2.It could help somebody else.
I have a code for making Text Fields as shown below
...Column(
children: <Widget>[
textField(text: 'User Name'),
SizedBox(height: 20),
textField(text: 'Password'), ])...
textField is a class that I made that has the following code to make a textfield. I did this to avoid code duplication,since I use textfields a lot in my applicatin.
...TextField(
textInputAction: TextInputAction.next,
obscureText: text == 'Password' ? true : false,
textCapitalization: TextCapitalization.words,
cursorColor: primaryColor,
textAlign: TextAlign.center,
decoration: InputDecoration(
labelText: text,
labelStyle: TextStyle(color: primaryColor, fontFamily: 'Bellotta'),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(...
Since I use this function to create the text field I cant use focusNode to change focus.
How can I solve this issue??
u can specify two more parameter one for focusNode of current textfield & another one for focus u want to change e.g.
textField(
text: 'User Name',
focusNode: // your focus node,
nextFocusNode: // your next field focus node
),
now u can use :
FocusScope.of(context).requestFocus(nextFocus);
tip: if u want to decrease code duplication then instead of creating textfield method u should store ur InputDecoration in var/ method.
I have a Flutter error:
W/IInputConnectionWrapper: getExtractedText on inactive InputConnection
It occurs when I clear the text in the TextField from TextEditingController input.
This is my clear text function, it works:
_onClear() {
setState(() {
WidgetsBinding.instance
.addPostFrameCallback((_) => _textController.clear());
});
}
child: TextField(
maxLines: 2,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
autofocus: false, //setting this to true,false, or removing has no effect
controller: _textController,
textAlign: TextAlign.left,
decoration: InputDecoration(
labelText: "Enter",
hintText: "Enter",
hintStyle: TextStyle(
fontStyle: FontStyle.italic, color:
Colors.blueGrey),
suffix: IconButton(
icon: Icon(Icons.cancel),
onPressed: _onClear,
),
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(25.0)),
),
),
)), //textfield
The user can type in the textfield, click on an image (UrlLauncher), and return to the form and still see the same text input in the text field. Everything works the ways it should, and the app runs without other errors.
Is this error something I have to worry about, will I still be able to submit the final app to the store with an error, or does it have to be correct? I have no clue how to do that. Pardon my lack of knowledge, I am just trying to learn all this and am stumped. There appears to be no other answers to this question regarding Flutter.
If you are using PHP Script for Insert Data then may be you are missing quote like '$FiledName' .Beacause this worked for me after correct it.Thanks
i have a text form field that user enter to it a code that sent to it and i must decide if input code is true or false but can not save value of text form field i have a button like it
GestureDetector(
onTap: () {
_formKey.currentState.save();
setState(() {
inputcode=key.getter("sms");
print(inputcode);
print(verifycode);
});
},
child: inputcode==verifycode?send:
VirtualBotton("please enter correct code","ok",40.0,10.0,width: 120.0,),
)
but i must press two times button for done this work
in this code when i enter correct code first run virtual Button class and second times that i press button run correct code how to run on tap before build child in button this is text form field
TextFormField(
inputFormatters: [
new LengthLimitingTextInputFormatter(30),
],
onSaved: (value) {
key.setter(id, value);
},
textAlign: alignment == null ? TextAlign.right : alignment,
maxLines: maxlines==null?1:maxlines,
style: TextStyle(
fontSize: 14,
),
textDirection: TextDirection.rtl,
controller: ctrl,
validator: (String value) {
if (value.isEmpty) {
return "";
}
return null;
},
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: const EdgeInsets.all(0.0),
hintText: _hint,
errorStyle: TextStyle(height: 0),
hintStyle: TextStyle(
color: hintconlor == null ? Colors.grey : hintconlor,
fontSize: hintsize == null ? 13 : hintsize)),
),
);
you can add TextEditingController and listen to controller changes. Here are docs with examples