0

I'm building a ListView with dynamic text in each item. But I want to cap the maximum height of each item and show a 'More' button when the height is bigger than something.

I currently have this in the item:

Container(
    constraints: BoxConstraints(maxHeight: 300),
    child: Text(htmlContent),
)

Which is capping the height as expected. But how can I display the More button on the items that do have the height larger than 300?

I can't just check the length of the string htmlContent because it has HTML tags which make the height variable depending on the tag type. That's why I need to check height somehow

Jan
  • 2,462
  • 3
  • 31
  • 56
  • Maybe you can use [ExpansionTile](https://flutter.dev/docs/catalog/samples/expansion-tile-sample) instead. – JRamos29 Jun 27 '20 at 02:59
  • hey @JRamos29 looks like the expansion tile always has 2 states. Which is not what I need. If the height is < 300, there shouldn't be 2 states. Plus I can't seem to change the button for changing the states (the arrow) – Jan Jun 27 '20 at 05:22
  • I noticed you are using an Html widget as child. How can you get the height of this widget to know if it's greater than 300? There's someway to get the height from html's `body` that you are setting as content? – JRamos29 Jun 27 '20 at 05:30
  • It would be exactly the same if it were a Text widget. The point is that content is dynamic. Instead of dynamic html ti would be dynamic text. – Jan Jun 27 '20 at 05:37
  • I change Html to Text to avoid confusion – Jan Jun 27 '20 at 05:39
  • Well, if the content will always be just String, as workaround you can add some dummy text to check the length of the String that fits the height of 300, then define that length as maximum, and for the length greater than that you add a button. Isn't the most elegant way to do it, but maybe it works. – JRamos29 Jun 27 '20 at 05:43
  • How would I know how much text is equal to 300 height? This is running in different phones/tablets. So a string that is 100 characters in a tablet might be just one line, but on an iPhone SE it's 5 lines. So I can't rely on text length. I need to know widget height – Jan Jun 27 '20 at 05:48
  • Oh, sorry. But i found this [discussion](https://stackoverflow.com/questions/49572747/flutter-how-to-hide-or-show-more-text-within-certain-length). Maybe some of the proposed solutions can help you. – JRamos29 Jun 27 '20 at 06:01
  • Thank you @JRamos29 that would work if my content was plain text. But the content is HTML, and I can't just cut it anywhere because it would break the HTML tags... or if the content at the beginning is an image url, it could break the url midway. I guess I should cange the tag back to Html instead of text, to make this clear. But the concept is the same. – Jan Jun 27 '20 at 15:16
  • Since you want to show a html content, you can use a regex or a html parser to get the content inside of the tags with useful content like head, tittle, body, etc. and display them like plain text in the list item. If the length is greater than a given number of characters, you can show a button `More` to show the full content in html format. – JRamos29 Jun 27 '20 at 17:20

2 Answers2

0

ListView needs a constrained height. You provide a hight to the listView by wrapping it in a container or keep the listView in Expanded widget for taking available height.

laxminarayan1998
  • 838
  • 8
  • 13
0

Use LayoutBuilder it will give you what constraints are available for the descendants through a BoxConstraints as a second parameter to the builder function

LayoutBuilder(
 builder: (ctx,constraints){
      if(constraints.maxHeight>300){
        return Widget //accordingly;
      } else {
        return Widget //accordingly
      }
    }
 )
Yadu
  • 2,979
  • 2
  • 12
  • 27