How to Use Iframe within WebView in Flutter
The WebView allows us to display web content in a flexible way inside mobile apps. The ability to add an iframe to a WebView adds another level of versatility, as it allows you to embed content from other sources directly within your web page.
In this blog post, let’s learn how to use iframe in Flutter WebView. We are using flutter webview package for this purpose. Make sure you installed it into your project using the instructions given here.
Apart from loading content from a web page, the WebView also allows us to read given raw HTML. You can use the same for embedding web content with iframe.
See the code snippet given below.
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(
Uri.dataFromString('''<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><iframe src="https://www.youtube.com/embed/PAOAjOR6K_Q"
title="YouTube video player" frameborder="0"></iframe></body></html>''',
mimeType: 'text/html'),
);Always remember that you may need to tweak the HTML code to make sure the content inside the iframe appears neatly across mobile phones.
Following is the complete code for Flutter webview iframe.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
),
home: const MyStatefulWidget());
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
late final WebViewController controller;
var loadingPercentage = 0;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(
Uri.dataFromString('''<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body><iframe src="https://www.youtube.com/embed/PAOAjOR6K_Q"
title="YouTube video player" frameborder="0"></iframe></body></html>''',
mimeType: 'text/html'),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView example'),
),
body: Stack(
children: [
WebViewWidget(
controller: controller,
),
],
));
}
}
We are showing a Youtube video using iframe. See the output given below.
That’s how you display iframe within Flutter WebView. I hope this tutorial is helpful for you.
