3

I have a fixed-size box that I need to pass the height value.

Inside the box, I have a Text widget that could overflow so I need to set the 'maxLines' 2. However, because the box height is fixed, the Text widget will not take 2 lines.

I can pass a larger value to the height of the box, but it doesn't look nice if the Text widget only takes up 1 line.

It would be nice if I can calculate the total pixel of the Text widget then work out how many lines the Text widget is needed by comparing it with the width of the fixed-size box.

    SizedBox(
      child: Text(
        title,
        style: Theme.of(context).textTheme.headline6,
        maxLines: 2,
      ),
      width: 300,
      height: 60,
    ),

for example

      height: Theme.of(context).textTheme.headline6.fontSize * title.length > 300? 72 : 60
e-j5
  • 1,759
  • 1
  • 11
  • 23
  • 1
    ```Expanded``` seems like the solution you are looking for – Israel Obanijesu Nov 03 '20 at 13:11
  • Why do you need to fix the height? You can use Container(width: 300) without specifying the height. Then, it will adjust the height of the container according to its content. If it is one line, it will shrink , if it is two line, it will become larger. Use padding if you want to make it look better. – Farhan Syah Nov 03 '20 at 13:15
  • you can use render object to get the size of the text height and width both but for that, you need to add that call in post-frame call back. – UTKARSH Sharma Nov 03 '20 at 13:35
  • Does this answer your question? [How to limit text length where the text changes dynamically?](https://stackoverflow.com/questions/64598513/how-to-limit-text-length-where-the-text-changes-dynamically) – Arpit Awasthi Nov 03 '20 at 18:38
  • @ArpitAwasthi Thank you for your comment. I need to display all text. – e-j5 Nov 04 '20 at 00:30
  • @FarhanSyah SizedBox is an example, the actual widget I'm using is `SliverPersistentHeader` which I need to provide fixed height. – e-j5 Nov 04 '20 at 00:32
  • @UTKARSHSharma Yes I noticed that but that seems to overkill what I want to achieve. my current solution is `height: Theme.of(context).textTheme.headline6.fontSize * posting.detail.title.length > 500 ? 72 : 58` where I can use `MediaQuery' to calculate exact value I decided to give it aproximate value of 500. – e-j5 Nov 04 '20 at 00:36
  • @e-j5 though you can specify the width and height of a text using the fitted box and set property like fit: BoxFit.fill still its not a good solution. – UTKARSH Sharma Nov 05 '20 at 02:28

1 Answers1

8

here is the answer

  Size calcTextSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      textDirection: TextDirection.ltr,
      textScaleFactor: WidgetsBinding.instance.window.textScaleFactor,
    )..layout();
    return textPainter.size;
  }

final double textWidth = calcTextSize(text, TextStyle(fontSize: fontSize)).width;
e-j5
  • 1,759
  • 1
  • 11
  • 23
  • 2
    if you have a problem with `TextDirection.ltr` use `import 'dart:ui' as ui;` and then `ui.TextDirection.ltr` – MCB Aug 05 '22 at 05:35