flutter How to modify the content and the height of the cursor in the TextField

user_9763596 0
Viewed 4460

The cursor and text in this picture are what I want enter image description here

But my demo looks like this.The text and cursor are small and not filled

enter image description here

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
flutter-layout flutter
4 Answers

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)),
     ),
user_85874760 

 TextField(
  cursorHeight: 20, // you can put your ideal height here
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'How to Change Cursor Height'

user_141166910

You can use the CupertinoTextField to achieve this:

CupertinoTextField(
  prefix: Icon(Icons.search),
  placeholder: 'search',
),
user_50613810

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',
    );
user_117989500
Related