flutter_widget_from_html
flutter_widget_from_html copied to clipboard
daohoangson
iFrame rendering creates empty spaces and RenderFlex overflow error
Steps to Reproduce
HTML
<html>
<head></head>
<body>
<p class="p2">
<b>Sie trägt regenbogenfarbene Kleidung, lehnt in dem Song „Me“ den Heiratsantrag eines Mannes ab und bedient sich für das Album „Lover“ einer „bisexuellen Ästhetik“ – für
<em>
<a href="https://www.nytimes.com/2024/01/04/opinion/taylor-swift-queer.html">New York Times</a>
</em>-Autorin Anna Marks ein klarer Fall: Pop-Sängerin Taylor Swift ist queer, sie traut sich bloß nicht, es zuzugeben.<span class="Apple-converted-space"> </span>
</b>
</p>
<p class="p2">
<span class="Apple-converted-space">Das Spielen mit Geschlechterrollen hat in der Popkultur Geschichte. David Bowie und Prince haben es perfektioniert. Auch die Ambivalenz ihrer Sexualität machte sie zu so schillernden, herausragenden Künstlern. Es gab bewusst Raum für Interpretation statt Eindeutigkeit. </span>
</p>
<p class="p2">
<b>
<span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/0d800949-6528-4c6c-9384-0770ede2bb4a/121440454-taylor-swift.jpg?width=800" width="1000" height="719" alt="Taylor Swift auf einem Konzert 2019."><br><span class="imagecaption">Taylor Swift auf einem Konzert 2019.</span>
</span>
</b>
</p>
<h2 class="p2">
<b>Bekenntnisse müssen her!</b>
</h2>
<p class="p2">Ganz anders heute. Stars wie Sänger Harry Styles, der sich gern feminin kleidet, sehen sich mit dem Vorwurf des „Queerbaiting“ konfrontiert. Das heißt, durch seine Ästhetik zieht er queere Fans an, ohne sich jedoch selbst der queeren Community zuzuordnen. Für viele ein No-Go. Ähnlich erging es der Pop-Sängerin Billie Eilish – bis sie sich endlich als „queer“ outete.<span class="Apple-converted-space"> </span>
</p>
<p class="p2">
<span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/fc9fd595-f269-4734-8764-e8db8adfa093/dpa-picture-alliance-2.394212836-highres.jpg?width=800" width="1000" height="765" alt="Sänger Harry Styles im Glitzer-Look. "><br><span class="imagecaption">Sänger Harry Styles im Glitzer-Look.
</span>
</span>
</p>
<p class="p2">
<span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/e18d97c7-0bdd-41ac-9399-7fd194505a9d/dpa-picture-alliance-2.441197026-highres.jpg?width=800" width="1000" height="1541" alt="Billie Eilish wurden ebenfalls „Queerbaiting“ vorgeworfen."><br><span class="imagecaption">Billie Eilish wurden ebenfalls „Queerbaiting“ vorgeworfen.</span>
</span>
</p>
<h2 class="p2">
<b>Autorin unterstellt Swift, eindeutige queere Signale zu senden</b>
</h2>
<p class="p2">Nun erwischte es Taylor Swift. Vom
<em>Time Magazine</em>
2023 als „Person of the Year“ gekürt, ist sie eine der erfolgreichsten Künstlerinnen der Zeit. Auf Spotify wurden ihre Songs über 26 Milliarden Mal abgerufen. Aufgrund ihres extravaganten Kleidungsstils und ihre Performance gilt Swift schon lange als Ikone der queeren Community. Sogenannte „Gaylors“, eine Untergruppe ihrer Fangemeinde, sind davon überzeugt, dass die Künstlerin eigentlich lesbisch oder bisexuell ist.<span class="Apple-converted-space"> </span>
</p>
<p class="p2">
<span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/82001366-a050-4cb9-8bf2-6fb8afbd8bd6/dpa-picture-alliance-2.120986884-highres.jpg?width=800" width="1000" height="1199" alt="Zeig mir deine Kleidung und ich nenn dir deine sexuelle Orientierung."><br><span class="imagecaption">Zeig mir deine Kleidung und ich nenn dir deine sexuelle Orientierung.</span>
</span>
</p>
<p class="p2">Dieser Spekulation schloss sich nun auch die
<em>New York Times</em>-Autorin Anna Marks an. Taylor Swifts Songtexte und Ästhetik strotzten nur so vor „Queer-Flagging“, schreibt sie in einem 5000-Zeichen Essay. Schmetterlinge, Regenbögen und ein Instagram-Post aus dem Jahr 2019, auf dem Swifts Arm zu sehen ist, am Handgelenk verschiedene Armbänder, unter anderem mit der Aufschrift „Lover“, „proud“ und „fearless“, sind für Marks ein klares Outing.<span class="Apple-converted-space"> </span>
</p>
<p>
<iframe height="669" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid #dbdbdb; box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;" class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/B0yzUuGjB7q/embed/captioned/?cr=1&v=14&wp=1080&rd=https%3A%2F%2Fcms.nius.de&rp=%2Fapp%2Foffice-hr%2Fcontent%2Farticle%2F2406c04a-d358-4511-9b49-4c9f2198c7a0#%7B%22ci%22%3A0%2C%22os%22%3A912.6999999880791%7D" allowtransparency="true" allowfullscreen="allowfullscreen" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no"></iframe>
</p>
<p class="p2">
<span class="Apple-converted-space">
<script async="" src="//www.instagram.com/embed.js"></script>
</span>
</p>
<h2 class="p2">
<b>Swift sieht sich nicht als Teil der LGBTQI+-Community</b>
</h2>
<p class="p2">Queerness in der Musikindustrie sei noch immer ein Tabuthema. Daher würde Swift ihre wahre sexuelle Orientierung verbergen, um nicht anzuecken und weiterhin profitabel zu bleiben, unterstellt ihr Marks. Auch der Fakt, dass die Sängerin mit dem Footballstar Travis Kelce liiert ist, scheint die
<em>New York Times</em>-Autorin nicht von ihrer Theorie abzubringen. Ganz im Gegenteil. Sie zweifelt an, dass Swift wirklich heterosexuell ist und behauptet, dass sie „in den düsteren, einsamen Ecken der Verheimlichung feststeckt“.</p>
<p class="p2"><img src="https://api.nius.de/api/assets/office-hr/c8e4ba89-3a3d-4d61-bcb9-03cd87690ba4/438493450.jpg?width=800" width="1000" height="794" alt="Swift mit ihrem Freund Travis Kelce."><br><span class="imagecaption">Swift mit ihrem Freund Travis Kelce.</span>
</p>
<p class="p2">Damit spricht Marks Swift, die im vergangenen Sommer der
<em>Vogue</em>
deutlich machte, nicht „Teil“ der LGBTQI+-Community zu sein, ihre Heterosexualität ab, ignoriert die Aussagen der Sängerin und fabuliert öffentlich über etwas, das Privatsache ist. Bemerkenswert ist, dass Anna Marks sich selbst als queer bezeichnet.<span class="Apple-converted-space"> </span>
</p>
<p>
<iframe height="598" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid #dbdbdb; box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;" class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/B1eMQJlDnJS/embed/captioned/?cr=1&v=14&wp=1080&rd=https%3A%2F%2Fcms.nius.de&rp=%2Fapp%2Foffice-hr%2Fcontent%2Farticle%2F2406c04a-d358-4511-9b49-4c9f2198c7a0#%7B%22ci%22%3A0%2C%22os%22%3A907.9000000059605%7D" allowtransparency="true" allowfullscreen="allowfullscreen" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no"></iframe>
</p>
<p class="p2">
<span class="Apple-converted-space">
<script async="" src="//www.instagram.com/embed.js"></script>
</span>
</p>
<h2 class="p2">
<b>Essay stößt auf Kritik</b>
</h2>
<p class="p2">Swifts Umfeld ist empört über die These der Autorin.
<em>CNN</em>-Reporter Oliver Darcy zitiert eine der Sängerin nahestehende Person: „Es gibt offenbar für manche Journalisten keine Grenze, wenn es um Stücke über Taylor geht, egal wie übergriffig, unwahr und unangebracht.“<span class="Apple-converted-space"> </span>
</p>
<p class="p2">Der Musikkritiker des
<em>Variety</em>-Magazins Chris Willmann schrieb auf X, das Essay sei das „am wenigsten vertretbare Meinungsstück, das ich je in der ‚Times‘ gesehen habe. Schlimmer noch: Es ist verfasst von einer Mitarbeiterin, die sich auf solche Spekulationen spezialisiert.“ Auch die Fans, die sogenannten „Swifties“, echauffierten sich in der Kommentarspalte unter dem Text. Die sexuelle Orientierung der Künstlerin gehe niemanden etwas an.<span class="Apple-converted-space"> </span>
</p>
<div class="twitter-tweet twitter-tweet-rendered" style="display: flex; max-width: 550px; width: 100%; margin-top: 10px; margin-bottom: 10px;">
<iframe style="position: static; visibility: visible; width: 550px; height: 344px; display: block; flex-grow: 1;" id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" class="" title="X Post" src="https://platform.twitter.com/embed/Tweet.html?dnt=false&embedId=twitter-widget-0&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&frame=false&hideCard=false&hideThread=false&id=1744107674906800263&lang=en&origin=https%3A%2F%2Fcms.nius.de%2Fapp%2Foffice-hr%2Fcontent%2Farticle%2F2406c04a-d358-4511-9b49-4c9f2198c7a0&sessionId=fa6899045836a2d9258d9d7284db59fe047a39fe&theme=light&widgetsVersion=2615f7e52b7e0%3A1702314776716&width=550px" data-tweet-id="1744107674906800263"></iframe>
</div>
<p class="p2">
<span class="Apple-converted-space">
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</span>
</p>
<p class="p2">Interessant ist die Sehnsucht einiger Vertreter der queeren Szene nach Eindeutigkeit und Bekenntnis. Was ändert ein Coming-out von Künstlern an der Qualität ihrer Musik? Wie kleinlich ist es, davon überzeugt zu sein, wer für Queere singt, muss selbst queer sein.</p>
<p class="p2">Letztlich passt es in ein Weltbild, in dem es bereits kulturelle Aneignung ist, wenn Weiße ein Curry essen, und in dem es als rassistisch gilt, sobald Nicht-POCs sogenannte „Braids“, also Flechtfrisuren, tragen. Die Schlussfolgerung dieses beschränkten Denkens ist eine Fragmentierung der Gesellschaft, in der jeder nur von Menschen der gleichen Ethnie, mit der gleichen sexuellen Orientierung und mit identischen Interessen umgeben ist.<span class="Apple-converted-space"> </span>
</p>
<p class="p2">
<em>Und das klingt, ehrlich gesagt, grauenvoll.<span class="Apple-converted-space"> </span>
</em>
</p>
<p class="p2">
<span class="Apple-converted-space">
<strong>Mehr NIUS:</strong><br></span>
<a href="https://www.nius.de/Video/stell-dir-vor-es-ist-queerer-weihnachtsmarkt-und-keiner-geht-hin/b8dfc8f8-79a8-4af3-8fa1-6fdf86d92b13">
<span class="Apple-converted-space">Stell dir vor, es ist queerer Weihnachtsmarkt – und keiner geht hin!</span>
</a>
<em>
<span class="Apple-converted-space"><br></span>
</em>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
<p>
<iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
<iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
</p>
</body>
</html>
`HtmlWidget` configuration
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:html_sample/html_data.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Sample App"),
),
body: const SingleChildScrollView(
child: HtmlWidget(
htmlData
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Tesing environment
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.3, on macOS 12.6 21G115 darwin-arm64, locale tr-TR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Connected device (4 available)
[✓] Network resources
• No issues found!
Expected results
iFrames should be rendered to fit to the device width without the RenderFlex overflow error and without horizontal/vertical gaps. I realized that RenderFlex overflow error and the vertical gaps only happen after flutter_widget_from_html: ^0.14.2. flutter_widget_from_html: ^0.10.6 is working without a RenderFlex overflow error but some of the iframes don't fit to the device width.
Actual results
flutter_widget_from_html: ^0.14.11 outputs:
| renderflex_overflow | gap1 | gap2 |
|---|---|---|
flutter_widget_from_html: ^0.10.6 outputs:
| width_gap | no_gap1 | no_gap2 |
|---|---|---|
@BasakK6 the latest version [email protected] has a fix for this, it will restore the previous behavior in v0.10 to display the IFRAME without overflow. Please try upgrading and let me know whether it works for you.
@daohoangson looks like the RenderFlex overflow error is resolved in the [email protected] but it still creates vertical gaps. Please find a comparison between the versions 0.15.0 and 0.10.6 below:
version 0.15.0 result: