daohoangson / flutter_widget_from_html

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
https://pub.dev/packages/flutter_widget_from_html
MIT License
624 stars 229 forks source link

BoxConstraints forces an infinite height issue #344

Closed otaku011 closed 3 years ago

otaku011 commented 3 years ago

I am getting infinite height issue for this html code when i use the flutter_widget_from_html package .. but it works fine when using the core package..

Also is there any way to render iframe when using the core package. And is it possible to get links of img tag from the "data-src" attribute instead of the default "src" attributes?

`════════ Exception caught by rendering library ═════════════════════════════════════════════════════ The following assertion was thrown during performLayout(): BoxConstraints forces an infinite height.

These invalid constraints were provided to RenderAspectRatio's layout() function by the following function, which probably computed the invalid constraints in question: _RenderCssSizing.performLayout (package:flutter_widget_from_html_core/src/widgets/css_sizing.dart:175:11) The offending constraints were: BoxConstraints(w=434.7, h=Infinity) The relevant error-causing widget was: HtmlWidget file:///D:/Android/AndroidProjects/Main%20Projects/news_detailed_screen.dart:205:36 When the exception was thrown, this was the stack:

0 BoxConstraints.debugAssertIsValid..throwError (package:flutter/src/rendering/box.dart:517:9)

1 BoxConstraints.debugAssertIsValid. (package:flutter/src/rendering/box.dart:561:21)

2 BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:565:6)

3 RenderObject.layout (package:flutter/src/rendering/object.dart:1677:24)

4 _RenderCssSizing.performLayout (package:flutter_widget_from_html_core/src/widgets/css_sizing.dart:175:11)

... The following RenderObject was being processed when the exception was fired: _RenderCssSizing#a07cb relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... parentData: (can use size) ... constraints: BoxConstraints(w=434.7, 0.0<=h<=Infinity) ... size: MISSING RenderObject: _RenderCssSizing#a07cb relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE parentData: (can use size) constraints: BoxConstraints(w=434.7, 0.0<=h<=Infinity) size: MISSING ... child: RenderAspectRatio#72363 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... parentData: ... constraints: MISSING ... size: MISSING ... aspectRatio: 1.8 ... child: RenderPointerListener#8ea84 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... parentData: ... constraints: MISSING ... size: MISSING ... behavior: deferToChild ... listeners: down ... child: RenderSemanticsAnnotations#3a800 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... parentData: ... constraints: MISSING ... size: MISSING ... child: RenderAndroidView#917ae NEEDS-LAYOUT NEEDS-PAINT ... needs compositing ... parentData: ... constraints: MISSING ... semantic boundary ... size: MISSING ════════════════════════════════════════════════════════════════════════════════════════════════════ `

Am trying to render this HTML code


<!--INFOLINKS_ON-->

  <div class="intro">Anime opens in theaters in Japan on November 27</div>
  <hr>

  <div class="meat">
<p>
The official website for the <cite class="e anime"><a href="/encyclopedia/anime.php?id=21126">Grisaia: Phantom Trigger</a></cite> <a href="/news/2017-07-07/frontwing-grisaia-phantom-trigger-game-gets-tv-anime/.118578">anime</a> began streaming a trailer for the <cite><cite class="e anime"><a href="/encyclopedia/anime.php?id=23499">Grisaia: Phantom Trigger the Animation Stargazer</a></cite></cite> <a href="/news/2019-04-26/grisaia-phantom-trigger-anime-gets-sequel-adapting-game-vol-3/.146160">sequel</a> on Friday. The video previews <cite class="e person"><a href="/encyclopedia/people.php?id=90878">Maon Kurosaki</a></cite>'s opening theme song "Gensō no Rinbu" and <cite class="e person"><a href="/encyclopedia/people.php?id=55281">Yoshino Nanjō</a></cite>'s ending theme <a href="/news/2020-07-06/grisaia-phantom-trigger-stargazer-anime-reveals-video-song-november-27-opening/.161510">song</a> "Ryūrui Ruru Mama."

</p>
<p align="center"><span style="display: block; width: 640px; max-width: 100%">
            <span style="display: block; padding-top: 56.25%; position: relative;"><iframe width="640" height="360" src="https://www.youtube.com/embed/Sn7SVYn6ut8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe></span></span></p>

<p style="clear:right">
<img src="https://cdn.animenewsnetwork.com/thumbnails/max450x450/cms/news.3/161510/grisaia.jpg" width="318" class="fright" height="450" data-src="/thumbnails/max450x450/cms/news.3/161510/grisaia.jpg">The anime will open in theaters in Japan on November 27.

</p>
<p>
The Campfire crowdfunding <a href="/news/2019-07-19/grisaia-phantom-trigger-anime-sequel-reveals-title-crowdfunding-campaign/.149144">campaign</a> for <cite><cite class="e anime">Grisaia: Phantom Trigger the Animation Stargazer</cite></cite> <a href="/news/2019-07-30/grisaia-phantom-trigger-stargazer-anime-crowdfunding-reaches-goal/.149543">reached</a> its 10 million yen (about US$92,000) goal less than 24 hours after it launched last July. Each episode was originally planned to be 60 minutes long and would <a href="/daily-briefs/2018-07-25/grisaia-phantom-trigger-anime-episodes-will-be-60-minutes-long/.134651">adapt</a> one volume of the original visual novel.

</p>
<p>
The sequel will tell the story of the "Vol. 3" game. The anime will feature returning characters Rena, Maki, and Tohka, as well as the new character Gumi.

</p>
<p>
The anime's cast are reprising their roles from the previous anime. <cite class="e person"><a href="/encyclopedia/people.php?id=2813">Akio Watanabe</a></cite>, the original character designer for the <cite>Grisaia</cite> franchise, is returning as the character designer for the sequel. <cite class="e company"><a href="/encyclopedia/company.php?id=16426">Bibury Animation Studio</a></cite> is again producing the anime.

</p>
<p>
The first <cite class="e anime">Grisaia: Phantom Trigger</cite> anime based on <cite class="e company"><a href="/encyclopedia/company.php?id=4603">Frontwing</a></cite>'s game of the same name <a href="/news/2018-12-12/grisaia-phantom-trigger-anime-new-promo-confirms-delay-to-march-15-with-90-minute-screenings/.140697">opened</a> in March 2019 at Tokyo's EJ Anime Theater Shinjuku and at four other theaters in Japan. <cite class="e company"><a href="/encyclopedia/company.php?id=14623">Sound Cadence Studios</a></cite> is producing an English <a href="/news/2020-04-24/grisaia-phantom-trigger-anime-unveils-english-dub-cast/.158913">dub</a> that will be included on the Blu-ray Disc release of the anime.

</p>
<p>
Anime director <cite class="e person"><a href="/encyclopedia/people.php?id=109015">Tensho</a></cite> <a href="/news/2017-08-19/rewrite-kinmoza-director-launches-bibury-animation-studio-with-grisaia-phantom-trigger/.120317">founded</a> the new animation studio <cite class="e company">Bibury Animation Studio</cite> to produce the anime as its first work. <cite class="e person">Tensho</cite> also wrote and supervised the scripts. <!--Akio -->Watanabe served as the anime's character designer and chief animation director. <cite class="e person"><a href="/encyclopedia/people.php?id=131504">Ryuichiro Yamakawa</a></cite> planned and produced the anime. <cite class="e company">Frontwing</cite> <a href="/daily-briefs/2018-06-25/frontwing-funds-grisaia-phantom-trigger-anime-entirely-on-its-own/.133359">funded</a> the anime on its own instead of using a production committee.

</p>
<p>
<em>Sources: <cite class="e anime">Grisaia: Phantom Trigger</cite>'s <a href="https://grisaia-pt.com/gptanime/news/gpt_movie" target="_blank">website</a>, <a href="https://moca-news.net/article/20201009/2020100918000a_/01/" target="_blank">MoCa News</a></em></p>
</div>
  <hr>

<!--INFOLINKS_OFF-->
</div>```
otaku011 commented 3 years ago

i have pinpointed the cause of this issue it's cause of styling in the iframe <iframe width="640" height="360" src="https://www.youtube.com/embed/Sn7SVYn6ut8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>

any solutions for this???

daohoangson commented 3 years ago

Which version of the package are you using? This is a bug but it has been fixed in the latest release already I think.

otaku011 commented 3 years ago

i am using flutter_widget_from_html: ^0.5.1

otaku011 commented 3 years ago

try with the iframe code whichi have provided. this error will pop up

daohoangson commented 3 years ago

v0.5.1+1 has been released with the fix for this. Please try upgrading and see if it works for you.

otaku011 commented 3 years ago

yes thank you the issue has been fixed.