'flutter How to modify the content and the height of the cursor in the TextField
The cursor and text in this picture are what I want

But my demo looks like this.The text and cursor are small and not filled
code
TextEditingController searchController = new TextEditingController();
FocusNode focusNode = new FocusNode();
// other code
TextField(
key: Key("buy_subject_input"),
autofocus: true,
focusNode: focusNode,
cursorColor: Colours.default_color,
decoration: InputDecoration(
hintText: 'search',
hintStyle: TextStyle(
color: Colours.hint_text_color,
),
prefixIcon: Icon(
Icons.search,
color: Colours.hint_text_color,
),
fillColor: Colors.white,
filled: true,
border: UnderlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(5)),
),
),
controller: searchController,
),
//other code
Solution 1:[1]
After searching everywhere I finally found it you have to give style: TextStyle( height: 2.0, ), to increase the cursor height.
TextField(
style: TextStyle(
height: 2.0,
),
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.only(
bottom: 15, top: 15, left: 10, right: 10)),
),
Solution 2:[2]
TextField(
cursorHeight: 20, // you can put your ideal height here
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'How to Change Cursor Height'
Solution 3:[3]
You can use the CupertinoTextField to achieve this:
CupertinoTextField(
prefix: Icon(Icons.search),
placeholder: 'search',
),
Solution 4:[4]
you can play around with input decoration parameter content-padding to reduce space between The limit area of text field and the TextForm style parameter to make text and cursor height bigger.
here is a code sample
TextEditingController searchController =
new TextEditingController(text: 'search');
FocusNode focusNode = new FocusNode();
@override
Widget build(BuildContext context) {
return TextField(
key: Key("buy_subject_input"),
autofocus: true,
focusNode: focusNode,
cursorColor: Colors.black,
style: TextStyle(fontSize: 22, height: 2.0),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 2.0),
hintStyle: TextStyle(
color: Colors.black,
),
prefixIcon: Icon(
Icons.search,
color: Colors.black,
),
fillColor: Colors.white,
filled: true,
border: UnderlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(5)),
),
),
controller: searchController,
);
}
}
you can also use the cupertino text field to have same layout as iphone
code sample
CupertinoTextField(
prefix: Icon(Icons.search),
placeholder: 'search',
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | imssurya |
| Solution 2 | dstacklurker |
| Solution 3 | Sami Haddad |
| Solution 4 | Kadri Nadir |

