Not able to disable keyboard appearing automatically - flutter

The moment I come on this page the keyboard appears automatically, I want to disable that.When someone press on the enter email.I want keyboard to come at that time only.
I have tried every thing nothing seems to work.Can someone please help me out
Form(
child: Column(
children: [
TextFormField(
// focusNode: fEmail,
onFieldSubmitted: (term) {
// fEmail!.unfocus();
FocusScope.of(context).unfocus();
// FocusScope.of(context).requestFocus(fPass);
},
textInputAction: TextInputAction.next,
autofocus: true,
style:TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
onFieldSubmitted: (term) {
fPass!.unfocus();
FocusScope.of(context).unfocus();
// FocusScope.of(context).requestFocus(fButton);
},
focusNode: fPass,
textInputAction: TextInputAction.next,
autofocus: true,
style:TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),

Remove autofocus: true, from your code or set it to autofocus: false,
Refer Focus and text fields here
Refer autofocus property here

You can use focus node to control the behaviour.
If you put autofocus=true in your code it will automatically focus on the topmost textfield widget in the current tree.
put autofocus = false or remove the parameter as it is false by default.

You can use focus Node to control the behaviour.
if you put autofocus: true if your code. this line will automatically focus on the top most Textfield widget.
put autofocus: false in our code it will be disable your keyboard which is opening automatically in the text filed.
Refer Focus and text fields: here
Refer autofocus property: here

Related

How to reduce Space between textfield and the input text in flutter

I am developing this textfield and for some reason the text is having some space below it. Please let me know the solution to this.
This is my code for textfield.
Expanded(
child: Container(
height: 40,
child: TextField(
keyboardType: TextInputType.number,
controller: textEditingController,
style: TextStyle(
fontSize: 14, height: 0, color: Colors.white),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
// isDense: true,
// errorText: validateQtyTxt.toString(),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10)),
labelText: 'QTY > '
// hintText: 'Enter a search term',
),
onChanged: (String newValue) {
(text) => setState(() => _text);
print(newValue);
int qty;
derivativeScanController.buttonClick(newValue, qty);
},
),
),
),
This is the image for reference
enter image description here
There is a property called contentPadding which takes EdgeInsetsGeometry type value with that you can reduce the spacing between textfield and actual text
sample code .
contentPadding: EdgeInsets.zero,
if you want to remove all the spacing change the isDense property to true also
isDense: true,
all the space will be removed
You can use the contentPadding in the decoration property of the TextField to edit its padding.
https://api.flutter.dev/flutter/material/InputDecoration-class.html
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(...),
),
)
Which you can fill with whatever values you want. You can use things like EdgeInsets.zero or EdgeInsets.symmetric too:
https://api.flutter.dev/flutter/painting/EdgeInsets-class.html
Change the textStyle from 0 to 1 and adjust the text using padding.

I want the value of textfield when user prints enter

I am a beginner in flutter, I was working with the textfield widget. I want the value of textfield when user click enter or when the value is completed. Thanks for the help in advance.
TextField(
cursorColor: primaryColor,
decoration: InputDecoration(
icon: Icon(
Icons.search,
color: primaryColor,
),
hintText: 'Search for your favourite',
border: InputBorder.none,
),
),
To get the text field value once it is completed, you can use the text field onSubmitted function. It provides you with the value once the user submits it. Here is the line of code you need to add.
TextField(
cursorColor: primaryColor,
decoration: InputDecoration(
icon: Icon(
Icons.search,
color: primaryColor,
),
hintText: 'Search for your favourite',
border: InputBorder.none,
),
onSubmitted: (value) {
print(value); // This will print the value submitted by the user. You can add your function inside this.
},
You can use onChanged to print it out.
TextField(
keyboardType: TextInputType.emailAddress,
textAlign: TextAlign.center,
onChanged: (value) {
email = value;
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Eenter your email')),
if you would like to use an advanced validator to check input value.
Please refer to this page flutter-how-to-change-border-of-text-form-field-on-error

How to remove the margin added to the label in TextField that has prefixIcon when receiving focus?

When the TextDield receives focus the label receives a margin in relation to the prefixIcon.
Current
Objective:
Container(
padding: EdgeInsets.all(10),
child: TextFormField(
keyboardType: TextInputType.number,
textInputAction: TextInputAction.continueAction,
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
alignLabelWithHint: true,
prefixIcon: Icon(Icons.device_thermostat),
labelText: "Temperature",
border: OutlineInputBorder(),
hintText: "Enter temperature",
),
),
)
Try replacing prefixIcon: Icon(Icons.device_thermostat), with prefix: Icon(Icons.device_thermostat),. Here is an example on DartPad with one field using prefixIcon and a second using prefix.

TextField's input text cutting in half after getting full?

Screenshot of the problem
I am trying to add an Email, which is a long text, but when the text field got full it cut all text in half.
here is my code:
Container(
height: 45,
decoration: BoxDecoration(
color: HexColor(MyColors.white),
),
child: TextFormField(
controller: _email,
maxLength: 100,
autofocus: true,
validator: validateEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
counterText: "",
border: OutlineInputBorder(),
),
),
),
I get your point.. your problem there is text got high up.. you can set
Just adjust the contentPadding top bottom so it can be centered
decoration: InputDecoration(
contentPadding:
const EdgeInsets.only(
left: 8.0,
bottom: 8.0,
top: 8.0)),```
My problem get solved by adding those lines:
maxLines: 1,
decoration: InputDecoration(
isDense: true,
.
.
.)
I think your problem happens because you are using Container in the wrong way, so your Container is covering your TextFormField. So, in my opinion you can use Container, but with minimal attribute, or without attributes at all. But, I'm more prefer to not using Container.
And also, you can add the maxLines as null if you want it to be really long.
Your code should be like:
TextFormField(
maxLines: null,
controller: _email,
maxLength: 100,
autofocus: true,
validator: validateEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
counterText: "",
border: OutlineInputBorder(),
),
style: TextStyle(
color: Colors.black,
),
),
Also, you can improve the design later by your self.
(NOTE: In my codes, I'm not using Container)

Flutter TextFormField: Align text description on left of entry field

Good day, I am creating TextFormFields in Flutter and I am getting a bit frustrated that I can't have Text on the left of the entry input that STAYS there.
hintText disappears when you enter the field.
prefixText only appears after you enter the field.
prefixIcon does exactly what I want, but I want Text instead of an icon.
The above image uses prefixIcon and hintText.
Does anyone have a suggestion on how to replace the icon I currently have with permanent Text instead, please? Thank you for any and all assistance.
Try using the prefixText property in decoration.
TextField(
controller: _textController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter a valid ZIP-Code',
errorText: _hasInputError ? "ZIP-Code is too short" : null,
counterText: _textController.text.length.toString(),
helperText: "ZIP-Code of shipping destination",
labelText: "ZIP-Code",
prefixText: "DE - ",
suffixIcon: Icon(Icons.airport_shuttle),
),
),
Refer this link
I think you cannot use prefixIcon when using decoration.
prefixIcon takes in a Widget type so you can pass a Widget into it if you want
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
hintText: "Password",
prefixIcon: CircleAvatar(
backgroundImage: NetworkImage(kDefaultProfilePicture),
) // You can replace this with a Text("") widget,
suffixIcon: IconButton(
icon: Icon(Icons.visibility),
onPressed: () {},
),
),
),
I used prefixIcon with an UnconstrainedBox:
TextFormField(
decoration: InputDecoration(
prefixIcon: UnconstrainedBox(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text("Date:")
)
)
)
)