How to wrap the hint text in a text field in Flutter?

user_8135645 0
Viewed 3751

The hintStyle property doesn't seem to contain anything that would let me denote that the hint text should wrap. The actual text in my text field wraps automatically. How can I wrap the hinttext?

flutter textfield
4 Answers

Using maxlines didn't work for me (for Flutter Web), but until the text automatically wraps I'm adding \n where I want it to break. 

TextFormField(
    maxLines: 5, 
    decoration: InputDecoration(
    hintMaxLines: 5,
    hintText: 'Make it a descriptive message that allows your client to \n understand what you are working on, what challenges you are \n facing, and if anything is unclear. \n Try to be clear but positive!',
    labelText: 'Today\'s message to your client, \n what is the team working on?',
    labelStyle: TextStyle(fontSize: 14,),
    hintStyle: TextStyle(fontSize: 14,),
    ),
    ),
user_128600360

The hintMaxLines attribute of InputDecoration does the intended thing. Just set it to the maximum number of lines the hint should be able to reach.

TextField(
  decoration: InputDecoration(
    hintText: 'Imagine a very long hint here word word ...',
    hintMaxLines: 10,
  ),
),

It looks like this:

A screenshot of the multiline hint textfield with the shown code

user_135284130

I fix it by using maxLines on my TextField

  TextField(  textAlign: TextAlign.center,
              maxLines: 2,
              decoration: InputDecoration(hintText: "Your Hint Your Hint Your Hint Your Hint Your Hint Your Hint")),
user_118567840

I think this is a flutter web bug - reproducable on chrome mac, safari mac and chrome android, seems to be ok on safari ipad, at least in simulator. We messed around with all the settings but nothing worked. Someone should probably log it as an issue in Flutter github repo.

And yes \n works like a charm so a big thank you Stephane!

user_50796180
Related