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.
Related
I want the Hint Text to remain even when Text is entered in the TextField:
But if I give TextField something like "hintText:" in simple way, Hint Text disappears when TextField is entered:
What should I do so that the hintText doesn't disappear even when a value is entered in the TextField?
.
.
.
I tried the following:
I. I tried using the suffix widget. But it appears from the end of the TextField. (If it was possible to make the suffix widget appear after the text, I think the problem would have been solved.) :
II. Obviously Prefix Widget can't help here :
Any answers are welcome, thanks.
You can use label to be visible at the top of the TextField & the hint u can simply add below line:
floatingLabelBehavior: FloatingLabelBehavior.always
full example is given below
TextFormField(
controller: textController,
style: theme.textTheme.bodyText2,
keyboardType: keyboardType ?? TextInputType.number,
enableInteractiveSelection: false,
decoration: InputDecoration(
labelText: labelText,
labelStyle: theme.textTheme.headline6,
suffixText: suffixText ?? '',
border: OutlineInputBorder(
borderSide:
BorderSide(color: theme.textTheme.bodyText2.color, width: 2),
),
hintText: '0.0',
floatingLabelBehavior: FloatingLabelBehavior.always),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
onChanged: (String text) => onChange(text),
);
Here is the code:
TextField(
controller: _textEditingController,
cursorColor: Colors.white70,
autofocus: true,
textCapitalization:
TextCapitalization.sentences,
decoration: const InputDecoration(
fillColor: Color(0xFF616161),
filled: true,
contentPadding: EdgeInsets.all(
25,
),
border: InputBorder.none,
hintText:
'Enter a title to remember your scan',
hintStyle: TextStyle(
color: Colors.white70,
),
),
style: const TextStyle(
color: Colors.white,
),
onEditingComplete: () {
print('yes');
},
),
the print statement passed to the onEditingComplete parameter's function doesn't execute when tapped on the check mark in the keyboard placed in the bottom right. Am I doing something wrong?
The code you provided us with works perfectly fine, if there's a problem it might be something else overriding it or simply a bug, try flutter clean, and restarting the whole app instead of hot-reload.
Anyway I assume you want to pass the written text into a variable when the user is done editing. For that it's better to use onChanged. this will save the text every time its changed, which makes it a lot easier for the user, pretty much nobody uses the finish button on the keyboard these days, they just hop from textfield to textfield.
onChanged: (value) {
setState(() {
inputText = value;
});
},
Hi I'm new to flutter so this may be a trivial problem, but I have a search box which contains an TextField and an Icon.
It works fine while the input text is less than the width of the input box, but once it exceeds that it seems to get chopped in half such that only the top half of it can be seen.
From what I understand Flutter is supposed to automatically deal with overflows. This is the build method for a generalised Input widget which is what I use along with the Icon in a Row. It's used within a Row but I don't believe that is the issue.
This is what it looks like when the text overflows.
return Expanded(
child: TextField(
autofocus: autofocus,
style: Theme.of(context).textTheme.bodyText2,
cursorColor: Theme.of(context).cursorColor,
maxLines: 1,
controller: controller,
decoration: InputDecoration(
border: InputBorder.none,
hintText: placeholder,
hintStyle: TextStyle(color: Theme.of(context).hintColor),
),
onChanged: (String value) {
onChange(value);
},
onSubmitted: (String value) {
onChange(value);
},
),
);
This is the GitHub repo in case you want to see the contextual usage. It's used in lib/routes/MainPage.dart as well as lib/routes/SearchPage.dart.
It turns out it was being cutoff due to the contentPadding on the InputDecoration. For those of you who are facing the same issue, change decoration property to:
InputDecoration(
contentPadding: EdgeInsets.zero, // Removes padding
isDense: true, // Centers the text
border: InputBorder.none,
hintText: placeholder,
hintStyle: TextStyle(color: Theme.of(context).hintColor),
)
I changed my application color. However TextFormField have got very invisible.
Are there any way to modify the TextFormField as it is better.
Thanks.
LoVe is correct. There are constructors for the TextFormField class that you can use here: Flutter documentation. Another example:
TextFormField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.lightBlue[50],
border: OutlineInputBorder(),
icon: Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name',
),
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
),
you can change the style and fill color to make it fit with the current theme:
TextFormField(
style: someTextStyle,
decoration: InputDecoration(
hintStyle:someTextStyle
fillColor: someColor,
filled: true,
),
)
In normal Android development, you can change the keyboard type dynamically but I can't seem to find a way to do so in Flutter.
TextInputType roomKeyboardType = TextInputType.text; // right on top of the build function
My custom form field:
Padding(
padding: const EdgeInsets.all(8.0),
child: FormBuilderTextField(
attribute: "room",
controller: widget.controllers[1],
keyboardType: roomKeyboardType,
decoration: InputDecoration(
filled: true,
labelText: "Room",
prefixIcon: Icon(Icons.location_on, color: Colors.black),
suffixIcon: IconButton(
icon: Icon(Icons.keyboard, color: Colors.black),
onPressed: () {
if (roomKeyboardType == TextInputType.text) {
roomKeyboardType = TextInputType.number;
return;
}
roomKeyboardType = TextInputType.text;
},
)),
validators: [
FormBuilderValidators.required(
errorText: "Please enter the room number",
),
],
),
),
Right now, I have something that looks like this with a keyboard IconButton on the end of the form field. When I click on it, I expect my keyboard type to change, yet when I do, nothing happens. It's supposed to toggle between text and number keyboard types and it only stays on text as that's what I have the variable initially set to. The variable I know is changing, it's just the fact that Flutter probably isn't remaking the widget so the keyboard stays the same. Is there any way to get around this and am I able to change the keyboardType dynamically?
you can change your keyboard type in TextFieldWidgets and many input widgets
like this:
TextField(
keyboardType: TextInputType.number,
hintText: '6 Digit-Code',
),