flutter_widget_from_html
flutter_widget_from_html copied to clipboard
daohoangson
Badges not displaying
Thank you for this wonderful package. I am stuck with an issue and was wondering if anyone could help me out.
I'm trying to display the following readme html response I get from https://api.github.com/repos/flutter/flutter/readme with this header Accept: application/vnd.github.html+json. However, the badges are not being displayed as expected.
Steps to Reproduce
HTML
<div id="readme" class="md" data-path="README.md">
<article class="markdown-body entry-content container-lg" itemprop="text"><a href="https://flutter.dev/"
rel="nofollow">
</a>
<div class="markdown-heading" dir="auto"><a>
<h1 align="center" class="heading-element" dir="auto">
<themed-picture data-catalyst-inline="true">
<picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://camo.githubusercontent.com/8ca355b5c8a6df04ea30294e513b38128c214075013df41d95609ccd1a745c91/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f636d732d73746f726167652d6275636b65742f36653139666565366234376233366361363133662e706e67"
data-canonical-src="https://storage.googleapis.com/cms-storage-bucket/6e19fee6b47b36ca613f.png">
<img alt="Flutter" src="https://camo.githubusercontent.com/28924a8cf399c489a5debfdd9e1f50fd4f936faf7defd401a4dcf8c3f5f19008/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f636d732d73746f726167652d6275636b65742f63383233653533623361316137623064333661392e706e67" data-canonical-src="https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png">
</picture>
</themed-picture>
</h1>
</a><a id="user-content-----------------------" class="anchor" aria-label="Permalink: "
href="#----------------------"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a></div>
<p dir="auto"><a href="https://flutter-dashboard.appspot.com/#/build?repo=flutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/1624f895e3d2fb86cfafd3fea6333c51339dd84e13c4c8e002ffbad01f96dcdc/68747470733a2f2f666c75747465722d64617368626f6172642e61707073706f742e636f6d2f6170692f7075626c69632f6275696c642d7374617475732d62616467653f7265706f3d666c7574746572" alt="Flutter CI Status" data-canonical-src="https://flutter-dashboard.appspot.com/api/public/build-status-badge?repo=flutter" style="max-width: 100%;"></a>
<a
href="./docs/contributing/Chat.md"><img src="https://camo.githubusercontent.com/c202b2aa7ebe1d5f5f645277515075100cad68b6bd95437b62fe56e7d331ceac/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f3630383031343630333331373933363134383f6c6f676f3d646973636f7264" alt="Discord badge" data-canonical-src="https://img.shields.io/discord/608014603317936148?logo=discord" style="max-width: 100%;"></a>
<a href="https://twitter.com/intent/follow?screen_name=flutterdev"
rel="nofollow"><img src="https://camo.githubusercontent.com/a59352c98d0e520f92636349f74bfb449dfdaf7006bdf17a3a3c9532f78e6360/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f666c75747465726465762e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77" alt="Twitter handle" data-canonical-src="https://img.shields.io/twitter/follow/flutterdev.svg?style=social&label=Follow" style="max-width: 100%;"></a>
<a href="https://codecov.io/gh/flutter/flutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/c55d9dd7b5e9e6414a020f81a1bc73853d92f279b7b06f36a59a0822a5ea3b54/68747470733a2f2f636f6465636f762e696f2f67682f666c75747465722f666c75747465722f6272616e63682f6d61737465722f67726170682f62616467652e7376673f746f6b656e3d31317944724a55324d32" alt="codecov" data-canonical-src="https://codecov.io/gh/flutter/flutter/branch/master/graph/badge.svg?token=11yDrJU2M2" style="max-width: 100%;"></a>
<a href="https://bestpractices.coreinfrastructure.org/projects/5631"
rel="nofollow"><img src="https://camo.githubusercontent.com/fe860127005991bd6f2c8376863959127a39098ce458f5d09afc51b72f64a18d/68747470733a2f2f626573747072616374696365732e636f7265696e6672617374727563747572652e6f72672f70726f6a656374732f353633312f6261646765" alt="CII Best Practices" data-canonical-src="https://bestpractices.coreinfrastructure.org/projects/5631/badge" style="max-width: 100%;"></a>
<a href="https://deps.dev/project/github/flutter%2Fflutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/de18ae95b180483ec54fa6dc5e6ddbeefca36da5ef2badbd25235a2c1945bba5/68747470733a2f2f6170692e736563757269747973636f726563617264732e6465762f70726f6a656374732f6769746875622e636f6d2f666c75747465722f666c75747465722f6261646765" alt="OpenSSF Scorecard" data-canonical-src="https://api.securityscorecards.dev/projects/github.com/flutter/flutter/badge" style="max-width: 100%;"></a>
<a href="https://slsa.dev"
rel="nofollow"><img src="https://camo.githubusercontent.com/ad5ef9258c7104c20a25b57eeba84818c308cc204c8bca17bbbb817475e9e3e8/68747470733a2f2f736c73612e6465762f696d616765732f67682d62616467652d6c6576656c312e737667" alt="SLSA 1" data-canonical-src="https://slsa.dev/images/gh-badge-level1.svg" style="max-width: 100%;"></a>
</p>
<p dir="auto">Flutter is Google's SDK for crafting beautiful, fast user experiences for
mobile, web, and desktop from a single codebase. Flutter works with existing
code, is used by developers and organizations around the world, and is free and
open source.</p>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto">Documentation</h2><a id="user-content-documentation" class="anchor"
aria-label="Permalink: Documentation" href="#documentation"><svg class="octicon octicon-link"
viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<ul dir="auto">
<li><a href="https://flutter.dev/get-started/" rel="nofollow">Install Flutter</a></li>
<li><a href="https://docs.flutter.dev/" rel="nofollow">Flutter documentation</a></li>
<li><a href="./docs/README.md">Development wiki</a></li>
<li><a href="https://github.com/flutter/flutter/blob/main/CONTRIBUTING.md">Contributing to Flutter</a></li>
</ul>
<p dir="auto">For announcements about new releases, follow the
<a href="https://groups.google.com/forum/#!forum/flutter-announce"
rel="nofollow">[email protected]</a>
mailing list. Our documentation also tracks <a href="https://docs.flutter.dev/release/breaking-changes"
rel="nofollow">breaking
changes</a> across releases.
</p>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto">Terms of service</h2><a id="user-content-terms-of-service"
class="anchor" aria-label="Permalink: Terms of service" href="#terms-of-service"><svg
class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">The Flutter tool may occasionally download resources from Google servers. By
downloading or using the Flutter SDK, you agree to the Google Terms of Service:
<a href="https://policies.google.com/terms" rel="nofollow">https://policies.google.com/terms</a>
</p>
<p dir="auto">For example, when installed from GitHub (as opposed to from a prepackaged
archive), the Flutter tool will download the Dart SDK from Google servers
immediately when first run, as it is used to execute the <code>flutter</code> tool itself.
This will also occur when Flutter is upgraded (e.g. by running the <code>flutter upgrade</code> command).
</p>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto">About Flutter</h2><a id="user-content-about-flutter" class="anchor"
aria-label="Permalink: About Flutter" href="#about-flutter"><svg class="octicon octicon-link"
viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">We think Flutter will help you create beautiful, fast apps, with a productive,
extensible and open development model, whether you're targeting iOS or Android,
web, Windows, macOS, Linux or embedding it as the UI toolkit for a platform of
your choice.</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Beautiful user experiences</h3><a
id="user-content-beautiful-user-experiences" class="anchor"
aria-label="Permalink: Beautiful user experiences" href="#beautiful-user-experiences"><svg
class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">We want to enable designers to deliver their full creative vision without being
forced to water it down due to limitations of the underlying framework.
Flutter's <a href="https://docs.flutter.dev/resources/inside-flutter" rel="nofollow">layered
architecture</a> gives you control over every pixel on the
screen and its powerful compositing capabilities let you overlay and animate
graphics, video, text, and controls without limitation. Flutter includes a full
<a href="https://flutter.dev/widgets/" rel="nofollow">set of widgets</a> that deliver pixel-perfect
experiences whether
you're building for iOS (<a href="https://docs.flutter.dev/development/ui/widgets/cupertino"
rel="nofollow">Cupertino</a>) or other platforms (<a
href="https://docs.flutter.dev/development/ui/widgets/material" rel="nofollow">Material</a>), along with
support for customizing or creating entirely new visual components.
</p>
<p align="center" dir="auto"><a target="_blank" rel="noopener noreferrer"
href="https://github.com/flutter/website/blob/main/src/content/assets/images/docs/homepage/reflectly-hero-600px.png?raw=true"><img src="https://github.com/flutter/website/raw/main/src/content/assets/images/docs/homepage/reflectly-hero-600px.png?raw=true" alt="Reflectly hero image" style="max-width: 100%;"></a>
</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Fast results</h3><a id="user-content-fast-results" class="anchor"
aria-label="Permalink: Fast results" href="#fast-results"><svg class="octicon octicon-link"
viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">Flutter is fast. It's powered by hardware-accelerated 2D graphics
libraries like <a href="https://skia.org/" rel="nofollow">Skia</a> (that underpins Chrome and Android) and
<a href="https://docs.flutter.dev/perf/impeller" rel="nofollow">Impeller</a>. We architected Flutter to
support glitch-free, jank-free graphics at the native speed of your device.
</p>
<p dir="auto">Flutter code is powered by the world-class <a href="https://dart.dev/" rel="nofollow">Dart
platform</a>, which enables
compilation to 32-bit and 64-bit ARM machine code for iOS and Android,
JavaScript and WebAssembly for the web, as well as Intel x64 and ARM
for desktop devices.</p>
<p align="center" dir="auto"><a target="_blank" rel="noopener noreferrer"
href="https://github.com/flutter/website/blob/main/src/content/assets/images/docs/homepage/dart-diagram-small.png?raw=true"><img src="https://github.com/flutter/website/raw/main/src/content/assets/images/docs/homepage/dart-diagram-small.png?raw=true" alt="Dart diagram" style="max-width: 100%;"></a>
</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Productive development</h3><a
id="user-content-productive-development" class="anchor" aria-label="Permalink: Productive development"
href="#productive-development"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">Flutter offers <a href="https://docs.flutter.dev/development/tools/hot-reload"
rel="nofollow">stateful hot reload</a>, allowing you to make changes to your code
and see the results instantly without restarting your app or losing its state.</p>
<p dir="auto"><a href="https://docs.flutter.dev/development/tools/hot-reload"
rel="nofollow"><img src="https://github.com/flutter/website/raw/main/src/assets/images/docs/tools/android-studio/hot-reload.gif?raw=true" alt="Hot reload animation" data-animated-image="" style="max-width: 100%;"></a>
</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Extensible and open model</h3><a
id="user-content-extensible-and-open-model" class="anchor"
aria-label="Permalink: Extensible and open model" href="#extensible-and-open-model"><svg
class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">Flutter works with any development tool (or none at all), and also includes
editor plug-ins for both <a href="https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter"
rel="nofollow">Visual Studio Code</a> and <a href="https://plugins.jetbrains.com/plugin/9212-flutter"
rel="nofollow">IntelliJ / Android Studio</a>.
Flutter provides <a href="https://pub.dev/flutter" rel="nofollow">tens of thousands of packages</a> to speed
your
development, regardless of your target platform. And accessing other native code
is easy, with support for both FFI (<a
href="https://docs.flutter.dev/development/platform-integration/android/c-interop" rel="nofollow">on
Android</a>, <a href="https://docs.flutter.dev/development/platform-integration/ios/c-interop"
rel="nofollow">on iOS</a>,
<a href="https://docs.flutter.dev/development/platform-integration/macos/c-interop" rel="nofollow">on
macOS</a>, and <a
href="https://docs.flutter.dev/development/platform-integration/windows/building#integrating-with-windows"
rel="nofollow">on Windows</a>) as well as
<a href="https://docs.flutter.dev/development/platform-integration/platform-channels"
rel="nofollow">platform-specific APIs</a>.
</p>
<p dir="auto">Flutter is a fully open-source project, and we welcome contributions.
Information on how to get started can be found in our
<a href="CONTRIBUTING.md">contributor guide</a>.
</p>
</article>
</div>
`HtmlWidget` configuration
HtmlWidget(
'''
<div id="readme" class="md" data-path="README.md">
<article class="markdown-body entry-content container-lg" itemprop="text"><a href="https://flutter.dev/"
rel="nofollow">
</a>
<div class="markdown-heading" dir="auto"><a>
<h1 align="center" class="heading-element" dir="auto">
<themed-picture data-catalyst-inline="true">
<picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://camo.githubusercontent.com/8ca355b5c8a6df04ea30294e513b38128c214075013df41d95609ccd1a745c91/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f636d732d73746f726167652d6275636b65742f36653139666565366234376233366361363133662e706e67"
data-canonical-src="https://storage.googleapis.com/cms-storage-bucket/6e19fee6b47b36ca613f.png">
<img alt="Flutter" src="https://camo.githubusercontent.com/28924a8cf399c489a5debfdd9e1f50fd4f936faf7defd401a4dcf8c3f5f19008/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f636d732d73746f726167652d6275636b65742f63383233653533623361316137623064333661392e706e67" data-canonical-src="https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png">
</picture>
</themed-picture>
</h1>
</a><a id="user-content-----------------------" class="anchor" aria-label="Permalink: "
href="#----------------------"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a></div>
<p dir="auto"><a href="https://flutter-dashboard.appspot.com/#/build?repo=flutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/1624f895e3d2fb86cfafd3fea6333c51339dd84e13c4c8e002ffbad01f96dcdc/68747470733a2f2f666c75747465722d64617368626f6172642e61707073706f742e636f6d2f6170692f7075626c69632f6275696c642d7374617475732d62616467653f7265706f3d666c7574746572" alt="Flutter CI Status" data-canonical-src="https://flutter-dashboard.appspot.com/api/public/build-status-badge?repo=flutter"></a>
<a
href="./docs/contributing/Chat.md"><img src="https://camo.githubusercontent.com/c202b2aa7ebe1d5f5f645277515075100cad68b6bd95437b62fe56e7d331ceac/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f3630383031343630333331373933363134383f6c6f676f3d646973636f7264" alt="Discord badge" data-canonical-src="https://img.shields.io/discord/608014603317936148?logo=discord"></a>
<a href="https://twitter.com/intent/follow?screen_name=flutterdev"
rel="nofollow"><img src="https://camo.githubusercontent.com/a59352c98d0e520f92636349f74bfb449dfdaf7006bdf17a3a3c9532f78e6360/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f666c75747465726465762e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77" alt="Twitter handle" data-canonical-src="https://img.shields.io/twitter/follow/flutterdev.svg?style=social&label=Follow"></a>
<a href="https://codecov.io/gh/flutter/flutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/c55d9dd7b5e9e6414a020f81a1bc73853d92f279b7b06f36a59a0822a5ea3b54/68747470733a2f2f636f6465636f762e696f2f67682f666c75747465722f666c75747465722f6272616e63682f6d61737465722f67726170682f62616467652e7376673f746f6b656e3d31317944724a55324d32" alt="codecov" data-canonical-src="https://codecov.io/gh/flutter/flutter/branch/master/graph/badge.svg?token=11yDrJU2M2"></a>
<a href="https://bestpractices.coreinfrastructure.org/projects/5631"
rel="nofollow"><img src="https://camo.githubusercontent.com/fe860127005991bd6f2c8376863959127a39098ce458f5d09afc51b72f64a18d/68747470733a2f2f626573747072616374696365732e636f7265696e6672617374727563747572652e6f72672f70726f6a656374732f353633312f6261646765" alt="CII Best Practices" data-canonical-src="https://bestpractices.coreinfrastructure.org/projects/5631/badge"></a>
<a href="https://deps.dev/project/github/flutter%2Fflutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/de18ae95b180483ec54fa6dc5e6ddbeefca36da5ef2badbd25235a2c1945bba5/68747470733a2f2f6170692e736563757269747973636f726563617264732e6465762f70726f6a656374732f6769746875622e636f6d2f666c75747465722f666c75747465722f6261646765" alt="OpenSSF Scorecard" data-canonical-src="https://api.securityscorecards.dev/projects/github.com/flutter/flutter/badge"></a>
<a href="https://slsa.dev"
rel="nofollow"><img src="https://camo.githubusercontent.com/ad5ef9258c7104c20a25b57eeba84818c308cc204c8bca17bbbb817475e9e3e8/68747470733a2f2f736c73612e6465762f696d616765732f67682d62616467652d6c6576656c312e737667" alt="SLSA 1" data-canonical-src="https://slsa.dev/images/gh-badge-level1.svg"></a>
</p>
<p dir="auto">Flutter is Google's SDK for crafting beautiful, fast user experiences for
mobile, web, and desktop from a single codebase. Flutter works with existing
code, is used by developers and organizations around the world, and is free and
open source.</p>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto">Documentation</h2><a id="user-content-documentation" class="anchor"
aria-label="Permalink: Documentation" href="#documentation"><svg class="octicon octicon-link"
viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<ul dir="auto">
<li><a href="https://flutter.dev/get-started/" rel="nofollow">Install Flutter</a></li>
<li><a href="https://docs.flutter.dev/" rel="nofollow">Flutter documentation</a></li>
<li><a href="./docs/README.md">Development wiki</a></li>
<li><a href="https://github.com/flutter/flutter/blob/main/CONTRIBUTING.md">Contributing to Flutter</a></li>
</ul>
<p dir="auto">For announcements about new releases, follow the
<a href="https://groups.google.com/forum/#!forum/flutter-announce"
rel="nofollow">[email protected]</a>
mailing list. Our documentation also tracks <a href="https://docs.flutter.dev/release/breaking-changes"
rel="nofollow">breaking
changes</a> across releases.
</p>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto">Terms of service</h2><a id="user-content-terms-of-service"
class="anchor" aria-label="Permalink: Terms of service" href="#terms-of-service"><svg
class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">The Flutter tool may occasionally download resources from Google servers. By
downloading or using the Flutter SDK, you agree to the Google Terms of Service:
<a href="https://policies.google.com/terms" rel="nofollow">https://policies.google.com/terms</a>
</p>
<p dir="auto">For example, when installed from GitHub (as opposed to from a prepackaged
archive), the Flutter tool will download the Dart SDK from Google servers
immediately when first run, as it is used to execute the <code>flutter</code> tool itself.
This will also occur when Flutter is upgraded (e.g. by running the <code>flutter upgrade</code> command).
</p>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto">About Flutter</h2><a id="user-content-about-flutter" class="anchor"
aria-label="Permalink: About Flutter" href="#about-flutter"><svg class="octicon octicon-link"
viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">We think Flutter will help you create beautiful, fast apps, with a productive,
extensible and open development model, whether you're targeting iOS or Android,
web, Windows, macOS, Linux or embedding it as the UI toolkit for a platform of
your choice.</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Beautiful user experiences</h3><a
id="user-content-beautiful-user-experiences" class="anchor"
aria-label="Permalink: Beautiful user experiences" href="#beautiful-user-experiences"><svg
class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">We want to enable designers to deliver their full creative vision without being
forced to water it down due to limitations of the underlying framework.
Flutter's <a href="https://docs.flutter.dev/resources/inside-flutter" rel="nofollow">layered
architecture</a> gives you control over every pixel on the
screen and its powerful compositing capabilities let you overlay and animate
graphics, video, text, and controls without limitation. Flutter includes a full
<a href="https://flutter.dev/widgets/" rel="nofollow">set of widgets</a> that deliver pixel-perfect
experiences whether
you're building for iOS (<a href="https://docs.flutter.dev/development/ui/widgets/cupertino"
rel="nofollow">Cupertino</a>) or other platforms (<a
href="https://docs.flutter.dev/development/ui/widgets/material" rel="nofollow">Material</a>), along with
support for customizing or creating entirely new visual components.
</p>
<p align="center" dir="auto"><a target="_blank" rel="noopener noreferrer"
href="https://github.com/flutter/website/blob/main/src/content/assets/images/docs/homepage/reflectly-hero-600px.png?raw=true"><img src="https://github.com/flutter/website/raw/main/src/content/assets/images/docs/homepage/reflectly-hero-600px.png?raw=true" alt="Reflectly hero image" style="max-width: 100%;"></a>
</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Fast results</h3><a id="user-content-fast-results" class="anchor"
aria-label="Permalink: Fast results" href="#fast-results"><svg class="octicon octicon-link"
viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">Flutter is fast. It's powered by hardware-accelerated 2D graphics
libraries like <a href="https://skia.org/" rel="nofollow">Skia</a> (that underpins Chrome and Android) and
<a href="https://docs.flutter.dev/perf/impeller" rel="nofollow">Impeller</a>. We architected Flutter to
support glitch-free, jank-free graphics at the native speed of your device.
</p>
<p dir="auto">Flutter code is powered by the world-class <a href="https://dart.dev/" rel="nofollow">Dart
platform</a>, which enables
compilation to 32-bit and 64-bit ARM machine code for iOS and Android,
JavaScript and WebAssembly for the web, as well as Intel x64 and ARM
for desktop devices.</p>
<p align="center" dir="auto"><a target="_blank" rel="noopener noreferrer"
href="https://github.com/flutter/website/blob/main/src/content/assets/images/docs/homepage/dart-diagram-small.png?raw=true"><img src="https://github.com/flutter/website/raw/main/src/content/assets/images/docs/homepage/dart-diagram-small.png?raw=true" alt="Dart diagram" style="max-width: 100%;"></a>
</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Productive development</h3><a
id="user-content-productive-development" class="anchor" aria-label="Permalink: Productive development"
href="#productive-development"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">Flutter offers <a href="https://docs.flutter.dev/development/tools/hot-reload"
rel="nofollow">stateful hot reload</a>, allowing you to make changes to your code
and see the results instantly without restarting your app or losing its state.</p>
<p dir="auto"><a href="https://docs.flutter.dev/development/tools/hot-reload"
rel="nofollow"><img src="https://github.com/flutter/website/raw/main/src/assets/images/docs/tools/android-studio/hot-reload.gif?raw=true" alt="Hot reload animation" data-animated-image="" style="max-width: 100%;"></a>
</p>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">Extensible and open model</h3><a
id="user-content-extensible-and-open-model" class="anchor"
aria-label="Permalink: Extensible and open model" href="#extensible-and-open-model"><svg
class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z">
</path>
</svg></a>
</div>
<p dir="auto">Flutter works with any development tool (or none at all), and also includes
editor plug-ins for both <a href="https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter"
rel="nofollow">Visual Studio Code</a> and <a href="https://plugins.jetbrains.com/plugin/9212-flutter"
rel="nofollow">IntelliJ / Android Studio</a>.
Flutter provides <a href="https://pub.dev/flutter" rel="nofollow">tens of thousands of packages</a> to speed
your
development, regardless of your target platform. And accessing other native code
is easy, with support for both FFI (<a
href="https://docs.flutter.dev/development/platform-integration/android/c-interop" rel="nofollow">on
Android</a>, <a href="https://docs.flutter.dev/development/platform-integration/ios/c-interop"
rel="nofollow">on iOS</a>,
<a href="https://docs.flutter.dev/development/platform-integration/macos/c-interop" rel="nofollow">on
macOS</a>, and <a
href="https://docs.flutter.dev/development/platform-integration/windows/building#integrating-with-windows"
rel="nofollow">on Windows</a>) as well as
<a href="https://docs.flutter.dev/development/platform-integration/platform-channels"
rel="nofollow">platform-specific APIs</a>.
</p>
<p dir="auto">Flutter is a fully open-source project, and we welcome contributions.
Information on how to get started can be found in our
<a href="CONTRIBUTING.md">contributor guide</a>.
</p>
</article>
</div>
''',
)
Tesing environment
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.91.0)
[✓] Connected device (4 available)
[✓] Network resources
Expected results
Actual results
@daohoangson I think the Picture tag is working because the Flutter image is being displayed. However, these badges inside the p tag are not.
<p dir="auto"><a href="https://flutter-dashboard.appspot.com/#/build?repo=flutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/1624f895e3d2fb86cfafd3fea6333c51339dd84e13c4c8e002ffbad01f96dcdc/68747470733a2f2f666c75747465722d64617368626f6172642e61707073706f742e636f6d2f6170692f7075626c69632f6275696c642d7374617475732d62616467653f7265706f3d666c7574746572" alt="Flutter CI Status" data-canonical-src="https://flutter-dashboard.appspot.com/api/public/build-status-badge?repo=flutter" style="max-width: 100%;"></a>
<a
href="./docs/contributing/Chat.md"><img src="https://camo.githubusercontent.com/c202b2aa7ebe1d5f5f645277515075100cad68b6bd95437b62fe56e7d331ceac/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f3630383031343630333331373933363134383f6c6f676f3d646973636f7264" alt="Discord badge" data-canonical-src="https://img.shields.io/discord/608014603317936148?logo=discord" style="max-width: 100%;"></a>
<a href="https://twitter.com/intent/follow?screen_name=flutterdev"
rel="nofollow"><img src="https://camo.githubusercontent.com/a59352c98d0e520f92636349f74bfb449dfdaf7006bdf17a3a3c9532f78e6360/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f666c75747465726465762e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77" alt="Twitter handle" data-canonical-src="https://img.shields.io/twitter/follow/flutterdev.svg?style=social&label=Follow" style="max-width: 100%;"></a>
<a href="https://codecov.io/gh/flutter/flutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/c55d9dd7b5e9e6414a020f81a1bc73853d92f279b7b06f36a59a0822a5ea3b54/68747470733a2f2f636f6465636f762e696f2f67682f666c75747465722f666c75747465722f6272616e63682f6d61737465722f67726170682f62616467652e7376673f746f6b656e3d31317944724a55324d32" alt="codecov" data-canonical-src="https://codecov.io/gh/flutter/flutter/branch/master/graph/badge.svg?token=11yDrJU2M2" style="max-width: 100%;"></a>
<a href="https://bestpractices.coreinfrastructure.org/projects/5631"
rel="nofollow"><img src="https://camo.githubusercontent.com/fe860127005991bd6f2c8376863959127a39098ce458f5d09afc51b72f64a18d/68747470733a2f2f626573747072616374696365732e636f7265696e6672617374727563747572652e6f72672f70726f6a656374732f353633312f6261646765" alt="CII Best Practices" data-canonical-src="https://bestpractices.coreinfrastructure.org/projects/5631/badge" style="max-width: 100%;"></a>
<a href="https://deps.dev/project/github/flutter%2Fflutter"
rel="nofollow"><img src="https://camo.githubusercontent.com/de18ae95b180483ec54fa6dc5e6ddbeefca36da5ef2badbd25235a2c1945bba5/68747470733a2f2f6170692e736563757269747973636f726563617264732e6465762f70726f6a656374732f6769746875622e636f6d2f666c75747465722f666c75747465722f6261646765" alt="OpenSSF Scorecard" data-canonical-src="https://api.securityscorecards.dev/projects/github.com/flutter/flutter/badge" style="max-width: 100%;"></a>
<a href="https://slsa.dev"
rel="nofollow"><img src="https://camo.githubusercontent.com/ad5ef9258c7104c20a25b57eeba84818c308cc204c8bca17bbbb817475e9e3e8/68747470733a2f2f736c73612e6465762f696d616765732f67682d62616467652d6c6576656c312e737667" alt="SLSA 1" data-canonical-src="https://slsa.dev/images/gh-badge-level1.svg" style="max-width: 100%;"></a>
</p>