Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 684
Anonk Avatar asked Jul 13 '17 00:07

Anonk


2 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,),
    ),
    ),
like image 120
Stephane Gallet Avatar answered Sep 19 '22 12:09

Stephane Gallet


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

like image 30
oxq Avatar answered Sep 19 '22 12:09

oxq