Align hint text in multiline TextField in Flutter

Question

I have a multiline TextField with a prefixIcon, so now the Icon is in the center vertically and hint text is at top left. I want both of them to be aligned, either at the top or in the center vertically.

The code used is

    Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: TextField(
            maxLines: 3,
            decoration: InputDecoration(
              hintText: 'Bio',
              prefixIcon: Icon(Icons.chrome_reader_mode),
              fillColor: Colors.grey[200],
              filled: true,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(),
              ),
            ),
          ),
        ),

Ellie

Try wrap the TextField in a Column Widget and use the mainAxisAlignment: MainAxisAlignment.center property – Morgue

Tried! It didn't work! – Ellie

Answer 1

This is an ugly solution, but it works. Other solutions (e.g., setting the textAlignVertical to TextAlignVertical.center) don't work since the maxLines is not null.

Add a TextStyle to the hintText and set the height of the TextStyle to 2.8. You need to reduce this when the fontSize is bigger because the height will be multiplied by the fontSize to make the line height. I added a contentPadding to make sure the text doesn't overflow(because now the text begins from the center of the TextField).

TextField(
                    maxLines: 3,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(vertical: 30),
                      hintText: 'Bio',
                      hintStyle: TextStyle(
                        height: 2.8,
                      ),
                      prefixIcon: Icon(Icons.chrome_reader_mode),
                      fillColor: Colors.grey[200],
                      filled: true,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide(),
                      ),
                    ),
                  ),

Result:

Gravamen

Answer 2

Although in your particular case problem can be solved by adding a newline character (hintText: '\nBio'), a better solution is to use labelText property instead of a hintText. By default label is aligned with the center of the TextField.

      TextField(
        maxLines: 3,
        decoration: InputDecoration(
          labelText: 'Bio',
          prefixIcon: Icon(Icons.chrome_reader_mode),
          fillColor: Colors.grey[200],
          filled: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
            borderSide: BorderSide(),
          ),
        ),
      ),
   

Dafna

The labelText instead of hintText works fine, thank you – Heinrike

Answer 3

  Widget customTextView(String hint, Icon iconName) {
    return Container(
      decoration: BoxDecoration(
        color: _DarkWhiteColor.withOpacity(0.5),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Padding(
        padding: const EdgeInsets.only(left: 0, right: 0),
        child: TextField(
          style: TextStyle(color: Colors.grey),
          cursorColor: Colors.grey,
          decoration: InputDecoration(
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            errorBorder: InputBorder.none,
            disabledBorder: InputBorder.none,
            fillColor: _DarkWhiteColor.withOpacity(0),
            filled: true,
            hintText: "Enter Your Message",
            labelStyle: TextStyle(color: Colors.white),
//                suffixIcon: iconName,
            prefixIcon: Container(
              transform: Matrix4.translationValues(0, -45, 0),
              child: iconName,
            ),
          ),
          maxLines: 6,
        ),
      ),
    );
  }

Camelot

you need to use icon in decoration and also use prefixIcon: Container( transform: Matrix4.translationValues(0, -45, 0), child: iconName, ), – Camelot

Answer 4

Set minLines to 1.

TextField(textAlignVertical: TextAlignVertical.center,
                            minLines: 1,
                            maxLines: 3,
                            decoration: InputDecoration(
                              hintText: 'Bio',
                              prefixIcon: const Icon(Icons.email),
                              fillColor: Colors.grey[200],
                              filled: true,
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10.0),
                                borderSide: BorderSide(),
                              ),
                            ),
                          ),

Belligerency