It is necessary to move the cursor to the end of the text, but in flutter this is strangely implemented through text selection, I do it like this
textController.selection =
TextSelection.collapsed(offset: textController.text.length);
it works, but when typing, it appears underlined
It is possible to somehow remove the underlining of the text, I read the documentation, but did not find it.
My TextFormField
TextFormField(
cursorColor: Colors.white,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
),
controller: textController,
autofocus: false,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
filled: true,
isDense: true,
hintText:
'search',
hintStyle: TextStyle(
//Style of hintText
color: Colors.white60,
fontSize: 20,
),
),
),
This might help you:
TextField(
style: const TextStyle(
decoration: TextDecoration.none),
),
Related
Like I want to use the Textfield only for text only, not numbers. So how to disable that?
title: TextField(
textCapitalization: TextCapitalization.sentences,
style: TextStyle(color: Colors.white),
controller: searchController,
decoration: InputDecoration(
hintText: 'Search for staff name',
hintStyle:
TextStyle(color: Colors.white, fontWeight: FontWeight.w400),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
filled: true,
enabled: true,
prefixIcon: Icon(
Icons.person_pin,
color: Colors.white,
size: 30,
),
suffixIcon: IconButton(
icon: Icon(Icons.clear, color: Colors.white),
onPressed: emptyTheTextformfield,
)),
),
Try this
inputFormatters: <TextInputFormatter>[
WhitelistingTextInputFormatter(RegExp(r"[a-zA-Z]+|\s")),
],
Tested on Both physical device and simulator.
As we all know textSelectionHandleColor is deprecated. So, I decided to make some changes in my app code, unfortunately, selectionHandleColor is still default blue color we get, when we create new app.
TextSelectionTheme(
data: TextSelectionThemeData(
cursorColor: kLightGreen,
selectionHandleColor: kLightGreen,
selectionColor: kGrey),
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(
color: kOffWhite,
letterSpacing: 1.5,
),
decoration: InputDecoration(
labelText: 'Label',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: kLightGreen),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: kLightGreen),
),
hintText: 'Hint',
hintStyle: TextStyle(
color: kOffWhite,
letterSpacing: 1.5,
),
labelStyle: TextStyle(
color: kLightGreen,
letterSpacing: 1.5,
),
),
),
),
Cursor color, selection color got changed except handle color. I have tried every possible way to change text selection handle color.
If you notice the below image, both the label and the text is aligned to top.
Can any one help with what has to be done to make the alignment to centre these two vertically?
Also if you notice just above the 'Email' the border is cut. Could some one help with code snippet to avoid this?
Also is there any way, can we format based on the content(value) of the 'TextFormField'?
The following are the coding which produces the above images.
TextFormField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
contentPadding: EdgeInsets.all(10.0),
labelText: 'Email:',
labelStyle: TextStyle(color: Colors.red, height: 3),
prefixIcon: Icon(Icons.email_outlined),
enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.white, width: 1.0)),
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red, width: 2.0)),
prefixStyle: TextStyle(
inherit: true,
color: Colors.red,
),
),
Ideally I wanted a text box like the below one
Flutter allows two types of Edit Input.
Filled Text Field (if the border uses UnderlineInputBorder)
Outlined Text Field (if the border uses OutlineInputBorder)
The following code snippet helped me to fix the issue.
Container(
padding: EdgeInsets.zero,
decoration: BoxDecoration(border: Border.all()),
child: TextFormField(
decoration: const InputDecoration(
fillColor: Colors.white,
filled: true,
contentPadding: EdgeInsets.all(10.0),
labelText: 'Email:',
labelStyle: TextStyle(color: Colors.red, height: 1),
prefixIcon: Icon(Icons.email_outlined),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
prefixStyle: TextStyle(
inherit: true,
color: Colors.red,
),
),
),
)
Your code is ok just remove the "height" parameter from labelStyle
labelStyle: TextStyle(color: Colors.red),
I want to focus my text field when initstate is initialized. eg. when I open any page and then if there is any text field then text field needs to be automatically focused.
TextFormField(
focusNode: focusNode,
style: TextStyle(
color: Colors.white,
fontSize: orientation == Orientation.portrait
? MediaQuery.of(context).size.width * 0.025
: MediaQuery.of(context).size.width * 0.015,
),
validator: (val) => Validators.validateRequired(
val, " Product Baarcode"),
controller: _addproduct,
// focusNode: _addproductFocusNode,
decoration: InputDecoration(
errorStyle: TextStyle(color: Colors.yellow),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
fillColor: Colors.white,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintStyle: TextStyle(color: Colors.white),
labelStyle: TextStyle(color: Colors.white),
filled: false,
prefixIcon: Icon(
FontAwesomeIcons.barcode,
color: Colors.white,
),
labelText: "Enter Product Barcode",
hintText: "Enter Product Barcode",
),
onFieldSubmitted: (val) {
_addProduct();
},
),
If you want a TextField to be focused when you open a page, then you can use the property autofocus:
TextField(
autofocus: true,
);
If you want it to be focused later point in time, then you can use the class FocusNode. You can check an example here:
https://flutter.dev/docs/cookbook/forms/focus#focus-a-text-field-when-a-button-is-tapped
You can use the TextFormField's autofocus: parameter and set it to true. This will however make the keyboard appear immediately as well.
Here, I've one text field which I want to keep always in focus and I don't want to open keyboard when the text field is clicked. in short text field always needs to be in focus.
Here is the my text field code.
TextFormField(
style: TextStyle(
color: Colors.white,
fontSize: orientation == Orientation.portrait
? MediaQuery.of(context).size.width * 0.030
: MediaQuery.of(context).size.width * 0.020,
),
validator: (val) => Validators.validateRequired(
val, " Product Baarcode"
),
controller: _addproduct,
decoration: InputDecoration(
errorStyle: TextStyle(color: Colors.yellow),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
fillColor: Colors.white,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintStyle: TextStyle(color: Colors.white),
labelStyle: TextStyle(color: Colors.white),
filled: false,
prefixIcon: Icon(
FontAwesomeIcons.barcode,
color: Colors.white,
),
labelText: "Enter Product Barcode",
hintText: "Enter Product Barcode",
),
onFieldSubmitted: (val) {
_addProduct();
},
),
You can set the autofocus property to true so that the cursor will start showing as soon as the app starts.
For more info please refer to this link
TextField(
autofocus: true,
)