Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to vertically center differently-sized hintText in TextField?

I have a TextField like this, where the input text and the hint text are sized differently.

TextField(
    style: Theme.of(context).textTheme.subhead.copyWith(
      fontSize: 70.0,
    ),
    decoration: InputDecoration(
      hintText: 'Enter a number',
      hideDivider: true,
      hintStyle: TextStyle(
        color: Colors.grey[500],
        fontSize: 25.0,
      ),
    ),
);

While the user input text is centered in my parent container, the hintText is not (top has more space than the bottom). Is there a way to vertically center the hint text as well?

The reason the hint text is not the same size as the input text is that it takes up more space than the green Container has, so it looks like Enter a nu..., which isn't very user friendly. (So alternatively, is there a way to have a newline in the hintText?)

Hint text is smaller so that I can fit it all in the widget

Input text is centered

like image 565
Mary Avatar asked Nov 16 '17 23:11

Mary


1 Answers

I see this is over 2 years old but in case others run into this problem:

InputDecoration has the property contentPadding.

TextField(
  decoration: InputDecoration(
    hintText: 'Hint Text',
    contentPadding: EdgeInsets.all(10.0),
  ),
);
like image 90
SalvadorChaos Avatar answered Nov 15 '22 07:11

SalvadorChaos