Flutter Markdown "Show more" button

Question

I use MarkdownBody from flutter_markdown inside a LimitedBox. When pressing a "Show more" button the maxHeight is set to double.infinity and the full text is shown:

                                             LimitedBox(
                                                maxHeight:
                                                    showMoreCommentsIds
                                                            .contains(
                                                                commentId)
                                                        ? double.infinity
                                                        : 100,
                                                child: Wrap(
                                                  direction:
                                                      Axis.horizontal,
                                                  children: <Widget>[
                                                    MarkdownBody(
                                                      data: showList[index]
                                                          .comment
                                                          .comment,
                                                    )
                                                  ],
                                                ),
                                              ),

But how can I find out the height of the text and only display the "Show more" button, if it is necessary?

score 1 · Accepted Answer · answered Jul 21 '20 at 17:51

1

You can find the length of the text using text.length and based on that information determine if the "Show more" button is needed. For example:

if(text.length > 60) {
_showButton();
}

You may need to do a little testing with the length of text in order to find out which length you want as the threshold. I just chose 60 as an arbitrary number.

answered Jul 21 '20 at 17:51

Hudson Kim

416
6
15

Thank you for your answer. The problem is that the text is markdown formatted, so it can have different font sizes or contain images. That is why I used max-height and not max-lines of a text widget. I am looking for a way to get the height of MarkdownBody, so I can only show the button if it is higher than 100. – Tiger3030 Jul 21 '20 at 18:48
1

Does this help? https://stackoverflow.com/questions/49307677/how-to-get-a-height-of-a-widget – Hudson Kim Jul 22 '20 at 16:41
Yes, the second answer to this question worked for me (https://stackoverflow.com/a/60868972/7061265). Thank you. – Tiger3030 Jul 22 '20 at 21:08
Can you share the code snippet? I am not able to show limited text properly formatted. – Raghav Aggiwal Oct 07 '20 at 06:53
I'm not sure what you mean by "I am not able to show limited text properly formatted". Can you please elaborate? What do you mean by not properly formatted? – Hudson Kim Oct 08 '20 at 15:45
I'm also not sure what you mean by that. To limit the height of the text, I used `LimitedBox` and `Wrap` (see code in my question). This should just limit the height of `MarkdownBody` to `maxHeight` of `LimitedBox`, so if the text is higher than that it is cut off at the bottom. The layout or format of the text is not affected by this. – Tiger3030 Jan 21 '21 at 10:42
@Tiger3030 I am trying to implement the same use case as you, but without luck. Could you provide a code snippet? I have successfully achieved the limited height but the markdown is rendered below my following widgets :/ – Raul Mabe Jun 29 '21 at 11:27
@Tiger3030 Nevermind! I achieved it by setting the `clipBehaviour` property of `Wrap` to `Clip.hardEdge` – Raul Mabe Jun 29 '21 at 11:36

score 0 · Answer 2 · answered Jan 19 '21 at 22:35

I struggled a little bit with a similar problem because I had to know the size of a widget to apply some logic.

I learned that you can prerender the widget in an Offstage widget, determine it's size with the widget key once it is mounted. You should wait for the rebuild, so you can force it and then you get the size with a function like this:

Future.delayed(Duration(milliseconds:100)).then(
    final widgetSize = getWidgetSize(widgetKey);

    // You can make logic here to remove the Offstage, variables, and free its space.

    // Todo: apply the size in your code after this
)

...

Size getWidgetSize(GlobalKey key) {
  final RenderBox renderBox = key.currentContext.findRenderObject();
  return renderBox.size;
}

In my case, I needed it after tapping somewhere, so I used it inside a function, but maybe you will apply it directly on the initState(), inside a post frame callback.

initState(){
     super.initState();
     ServicesBinding.instance.addPostFrameCallback((_) async {
        // here
     });
}

Flutter Markdown "Show more" button

2 Answers2