How can I fit the flutter container html widget data

user_12317167 0
Viewed 602

I used wordpress v2 api, and I want to see a few lines article content before seeing all detail.

However,When I use substring method and cut the data, the html code is broken and the div-css appears.

This is blog box, I mean, I want the text below not to overflow, I can't cut it like text because I use it in the html widget.

enter image description here

Container(
    height: 100,
    child: HtmlWidget( article.content ,
      bodyPadding: EdgeInsets.zero,
      textStyle: GoogleFonts.nunito(textStyle: utils.ThemeText.relatedArticleTitle,fontStyle: FontStyle.normal,),
    ),
),

How can I see a few lines of data using html widgets.

Thank you from now.

flutter-layout flutter
3 Answers

I had your same problem, I solved it with this method, that makes you loose the properties of html but it still show the text without the html tag

// import html package,if you dont have it add to pubspec.yaml "html: ^0.15.0" 
import 'package:html/parser.dart' show parse; 
  
// the widget that overflow
Text(_parseHtmlString(htmlText), maxLines: 3, overflow: TextOverflow.ellipsis,)


// the parsing function to remove the html tags and maintain the text
String _parseHtmlString(String htmlString) {
  final document = parse(htmlString);
  if (document.body?.text != null) {
    return parse(document.body!.text).documentElement!.text;
  }

  return "";
}

Unfortunately, at the moment it does not look like there is an overflow field in HtmlWidget.

user_104332910

I got around this by using flutter_html package with a combination of its shrinkWrap property and an Expanded widget:

Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                    child: Html(
                     data: myText!.outerHtml,
                     shrinkWrap: true,
                )),
              ],
            )
user_17929940

Remove height from it:

Container(
    height:100,
    child: HtmlWidget( article.content ,
      bodyPadding: EdgeInsets.zero,
      overflow: TextOverflow.fade,
      textStyle: GoogleFonts.nunito(textStyle: utils.ThemeText.relatedArticleTitle,fontStyle: FontStyle.normal,),
    ),
),
user_52509730
Related