Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebViews in Flutter - Does it really work?
Search
Lara Martín
May 14, 2019
Programming
0
340
WebViews in Flutter - Does it really work?
Talk given at Flutter Berlin meetup
https://www.meetup.com/flutter-berlin/events/261016228/
Lara Martín
May 14, 2019
Tweet
Share
More Decks by Lara Martín
See All by Lara Martín
Supporting Each Other: Growth for Juniors and Seniors
laramartin
1
57
Accesibility on Flutter
laramartin
0
260
WebViews on Flutter
laramartin
1
370
Accessibility on Flutter
laramartin
2
810
Flutter for Web - Codemotion Berlin 2019
laramartin
2
68
Supporting Each Other - Growth for Juniors and Seniors
laramartin
1
380
Flutter for Web: Beautiful Apps and Websites with a Single Codebase
laramartin
1
310
Flutter Study Jam @ GDG Hannover
laramartin
1
330
WebViews in Flutter - Does it really work?
laramartin
2
550
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
170
AIコーディングAgentとの向き合い方
eycjur
0
270
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Laravel Boost 超入門
fire_arlo
3
210
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
670
Ruby Parser progress report 2025
yui_knk
1
440
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
280
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.2k
Namespace and Its Future
tagomoris
6
700
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Into the Great Unknown - MozCon
thekraken
40
2k
GitHub's CSS Performance
jonrohan
1032
460k
Building Applications with DynamoDB
mza
96
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Automating Front-end Workflow
addyosmani
1370
200k
A designer walks into a library…
pauljervisheath
207
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Transcript
WebViews in Flutter Lara Martín @lariki Does it really work?
What is a WebView?
Why we need WebViews? Perform social login Show static content
(e.g. FAQ ) Payment confirmation Use cases Making an app that is just a web Avoid for
https:/ /pub.dev/packages/webview_flutter
Setup # pubspec.yaml dependencies: flutter: sdk: flutter webview_flutter: ^0.3.6
Implementation • Not reimplemented in Dart! • Uses native WebView
• iOS: WKWebView • Android: android.webkit.WebView • But is it a Widget? • The plugin creates the native WebView • And renders it in Flutter!
Working Example
Rendering the Android WebView
Flutter Inspector
Flutter Inspector
Flutter Inspector
WebView Rendering on Android
WebView WebView Rendering on Android
AndroidView WebView child WebView Rendering on Android
WebView Rendering on Android AndroidView WebView WebViewFlutterPlugin child requires …
WebViewFactory registers
AndroidView WebView FlutterWebView : PlatformView WebView contains creates child …
WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
AndroidView WebView FlutterWebView : PlatformView WebView PlatformViewController contains creates renders
Surface child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
AndroidView _AndroidPlatformView RenderAndroidView : RenderBox WebView FlutterWebView : PlatformView WebView
PlatformViewController contains creates renders Surface contains contains child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
AndroidView _AndroidPlatformView RenderAndroidView : RenderBox WebView FlutterWebView : PlatformView WebView
PlatformViewController contains creates renders Surface contains contains child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers Surface ID
Rendering the iOS WKWebView
WebView Rendering on iOS • Similar to Android • RenderUiKitView
will render a surface created in the PlatformViewIOS • Passes an ID
WebView Widget
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
WebView Widget: initialUrl WebView( ),
WebView Widget: initialUrl WebView( initialUrl: “https://www.flutter.dev/", ),
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
WebView Widget: javaScriptMode WebView( initialUrl: … javascriptMode: JavascriptMode.unrestricted, ),
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
WebView Widget: onWebViewCreated WebView( initialUrl: … javascriptMode: … onWebViewCreated: (WebViewController
controller) { _controller = controller; }, ),
WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward()
• goBack() • goForward() • reload() • clearCache()
WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward()
• goBack() • goForward() • reload() • clearCache()
WebViewController: reload onPressed: () async { await _controller.reload(); }
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
WebView Widget: onPageFinished WebView( initialUrl: … javascriptMode: … onWebViewCreated: …
onPageFinished: (url) { // use the URL } )
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels The Power of WebViews in Flutter, by Emily Fortuna https:/ /medium.com/flutter-io/the-power-of- webviews-in-flutter-a56234b57df2
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
NavigationDelegate typedef NavigationDecision NavigationDelegate(NavigationRequest n);
NavigationDelegate WebView( navigationDelegate: (request) { bool isHost = request.url.startsWith( “https://flutter.dev”);
if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } ),
WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished
• gestureRecognizers • navigationDelegate • javaScriptChannels
javaScriptChannels WebView( javascriptChannels: {_channel}, ),
javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message)
{ print(message.message); }); WebView( javascriptChannels: {_channel}, ),
javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message)
{ print(message.message); }); Flutter side <script> LaraDemo.postMessage('Hello'); </script> HTML side
Limitations
Input Fields https:/ /github.com/flutter/flutter/issues/19718
Text Selection https:/ /github.com/flutter/flutter/issues/24584
Performance AndroidView is costly
What’s next
Loading an HTML string https:/ /github.com/flutter/plugins/pull/1312
Setting a custom UserAgent https:/ /github.com/flutter/plugins/pull/968
Page loaded correctly https:/ /github.com/flutter/plugins/pull/1389
Contributing
Contributing
Flutter is open-source. Submit a pull request!
Thanks. @lariki Lara Martín