Embed Widget

Estimated reading: 3 minutes 30 views

HtmlEmbed

HtmlEmbed is a utility widget that allows you to embed external HTML-based content directly into your Flutter dashboard UI. It is especially useful for integrating third-party tools, dashboards, reports, or widgets that are already available as web pages.

This widget is designed primarily for Flutter Web, but can also be adapted for hybrid use cases depending on platform support.

Common Use Cases

Embedding analytics dashboards (e.g. charts, reports)
Displaying third-party tools, Youtube video, Google Maps or admin panels
Showing documentation, previews, or sandbox environments
Integrating external services without rebuilding UI components
Prototyping or rapid integration during development

Constructor

Dart

HtmlEmbed({
  Key? key,
  required String url,
  double? aspectRatio,
  bool fullScreen = false,
})

HtmlEmbed({
  Key? key,
  required String url,
  double? aspectRatio,
  bool fullScreen = false,
})

Parameters

Parameter	Description
`url`	Required. The URL of the HTML page or web content to embed.
`aspectRatio`	Optional aspect ratio (e.g. `16 / 9`) to control the embedded content’s height relative to its width.
`fullScreen`	If `true`, the embedded content will expand to fill the available screen area.

Basic Usage Example

Dart

HtmlEmbed(
  url: 'https://example.com/embedded-dashboard',
),

HtmlEmbed(
  url: 'https://example.com/embedded-dashboard',
),

This will embed the given URL using the default sizing behavior.

Using a Fixed Aspect Ratio

Dart

HtmlEmbed(
  url: 'https://example.com/chart',
  aspectRatio: 16 / 9,
),

HtmlEmbed(
  url: 'https://example.com/chart',
  aspectRatio: 16 / 9,
),

This is useful when embedding media-like content such as charts, videos, or previews that require consistent proportions.

Full-Screen Embed Example

Dart

HtmlEmbed(
  url: 'https://example.com/admin-panel',
  fullScreen: true,
),

HtmlEmbed(
  url: 'https://example.com/admin-panel',
  fullScreen: true,
),

This mode is ideal for standalone tools or pages that should behave like a full-screen module inside the dashboard.

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Embed section.

Dart

Base UI → Embed

Base UI → Embed

Best Practices

Use aspectRatio when embedding visual content to avoid layout jumps.
Enable fullScreen only when the embedded content is the main focus of the page.
Ensure the embedded URL supports iframe embedding and does not block it via security headers.
Avoid embedding untrusted sources to prevent security risks.
Prefer native FlutKit widgets for core UI whenever possible, and use HtmlEmbed for integrations.

Summary

HtmlEmbed provides a simple and flexible way to integrate external web-based content into FlutKit dashboards. Whether for analytics, third-party tools, or rapid prototyping, it helps developers extend functionality without duplicating existing web solutions, while still fitting cleanly into the overall dashboard layout.

You can experiment with this widget safely inside a Labs or testing screen before integrating it into production pages.