Is it possible to force Text widget to use two line space?

Question

I need to find out a method to force Flutter Text widget to use two text lines space even if the line is only one. For example in the below photo one card is lower than the other one due to the fact that Text widget use only one line space.

Does anyone know some trick to force Text widget to use maxLines space even if only one line is needed?

Keijo

Answer 1

Adding minLines to Text is currently an open feature request. You can track it here

For now, a suggested workaround is to use:

str = 'example'; 

Text(
  str + '\n',
  maxLines: 2,
)

Stoneman

Pretty clean solutiion! Thanks alot – Ungava

Answer 2

you can use \n to set minimum lines (it is a trick)

this issue is still open Github: Add minLines to Text (flutter issue)

          Text(
            '${product.name}\n\n', //equal minlines: 3
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
            style:
                const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),

Passably

Answer 3

You could simply use height property in TextStyle:

Text(
  "Some lines of text",
  style: TextStyle(
    fontSize: 14.0,
    height: 1.5 //set height as you want
  )
)

another option would be to use Spacer():

Row(
  children: <Widget>[
    Text('Begin'),
    Spacer(), // Defaults to a flex of one.
    Text('Middle'),
    // Gives twice the space between Middle and End than Begin and Middle.
    Spacer(flex: 2),
    Text('End'),
  ],
)

you can find more details about Spacer in the official docs here

Goodfellowship

Answer 4

Here is the best solution I found.

You can set all text styles in one place and get it like so

static TextStyle subtitle2(Color color) =>
  initStyle(color, 14.0, FontWeight.w600);

static TextStyle initStyle(
 Color color, 
 double fontSize, 
 FontWeight fontWeight) =>
  TextStyle(
      height: 1.2,
      fontSize: fontSize,
      color: color,
      fontWeight: fontWeight,
      fontFamily: 'OpenSans');

Don't forget to set height property of Text Style

Then you can define your text like this

TextStyle textStyle = AppTextStyle.headline6(AppColors.onBackground);
int lines = 3;
...
Container(
      height: textStyle.height! * textStyle.fontSize! * lines,
      child: Text('Title', style: textStyle))

For me work Perfectly

enter image description here

Zoie

It works for me. double titleHeight = Theme.of(context).textTheme.bodyLarge!.height! * Theme.of(context).textTheme.bodyLarge!.fontSize! * 2; SizedBox( height: titleHeight, child: Text( "${item['name']}", style: Theme.of(context).textTheme.bodyLarge, maxLines: 2, overflow: TextOverflow.ellipsis, ), ) – Brittle

Answer 5

Try this, it will work.

Row(
     children: [
         Expanded(
           flex: 1,
           child: Text(
              'Your long text goes here, you can add as much as you want',
              maxLines: 2,   /// you can change it on your requirements, or may be ignore it
              ),
      )
    ],
)

Syncytium

Answer 6

A workaround that doesn't require setting maxLines is to place the Text in a Stack with another Text with a (mostly) identical style (except transparent) that has exactly n lines.

That way, Flutter will paint both, and the size it takes will be whatever text is more lines. As an extra benefit, you can align the display Text too, making it centred it you want (for example)

return Stack(
  alignment: Alignment.center,
  children: [
    Text(
      "\n\n\n",
      style: Theme.of(context).textTheme.bodyMedium.copyWith(
            color: Colors.transparent,
      ),
    ),
    Text(
      "Single Line of Text",
      style: Theme.of(context).textTheme.bodyMedium,
    ),
  ],
);

I'll do this quite often if I have a bit of UI where the text changes between one of several possible values, and I don't want the container it's wrapped in to change size every time. Works with buttons, chips, paragraphs, whatever. And also works with the user's font scaling and any translations of the text too.

Alethaalethea