CODEWITHSUNDEEP
flutteralignmenttextfield
Suragch
Suragch

Reputation: 512666

Flutter TextField align text at the top

I have a TextField like this:

enter image description here

I want the hint and the text to be aligned at the top, not in the center.

I tried textAlign: TextAlign.start but that is just for the horizontal alignment.

TextField(
  textAlign: TextAlign.start,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
),

How to I make the text go to the top?

I found the answer so I am adding this as a self-answer Q&A.

Upvotes: 17

Views: 16655

Answers (5)

Mitva Panchani
Mitva Panchani

Reputation: 31

You can now pass alignLabelWithHint: true to InputDecoration to cause the label to align to the top.

Upvotes: 2

Syying Em
Syying Em

Reputation: 21

TextFormField( 
  decoration: InputDecoration(
    alignLabelWithHint: true,
    label: Text('Your label name'),
  ),
)

Upvotes: 2

Techalgoware
Techalgoware

Reputation: 620

Add alignLabelWithHint: true,


TextFormField(
  maxLines: 10,
  minLines: 5,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
      alignLabelWithHint: true,
)

Upvotes: 22

Scaphae Studio
Scaphae Studio

Reputation: 551

The vertical alignment of the text within an input box will be used.

A single y value that can range from -1.0 to 1.0. -1.0 aligns to the top of an input box so that the top of the first line of text fits within the box and its padding. 0.0 aligns to the center of the box. 1.0 aligns so that the bottom of the last line of text aligns with the bottom interior edge of the input box.

You need to assure that:

TextField.textAlignVertical, which is passed on to the InputDecorator.

TextField(
  textAlignVertical: TextAlignVertical.top,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
)

Upvotes: 3

Suragch
Suragch

Reputation: 512666

To align the text inside of a TextField to the top, use 

textAlignVertical: TextAlignVertical.top

This will give you what you want:

enter image description here

TextField(
  textAlignVertical: TextAlignVertical.top,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
)

Upvotes: 39

Related Questions