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
July 15, 2019
Programming
2
560
WebViews in Flutter - Does it really work?
Talk given at Flutter London meetup
https://www.meetup.com/FlutterLDN/events/262574231/
Lara Martín
July 15, 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
870
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
340
Supporting Each Other - Growth for Juniors and Seniors
laramartin
0
340
Other Decks in Programming
See All in Programming
理論と実務のギャップを超える
eycjur
0
180
CSC305 Lecture 09
javiergs
PRO
0
310
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
CSC509 Lecture 07
javiergs
PRO
0
240
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
430
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.8k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Featured
See All Featured
Making Projects Easy
brettharned
120
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Scaling GitHub
holman
463
140k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Side Projects
sachag
455
43k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Producing Creativity
orderedlist
PRO
347
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
It's Worth the Effort
3n
187
28k
Transcript
WebViews in Flutter Does it really work? Lara Martín @Lariki
Flutter/Dart GDE - Android Developer
What is a WebView?
Why we need WebViews? Use cases Perform social login Show
static content (e.g. FAQ) Payment confirmation Avoid for Making an app that is just a web
https://pub.dev/packages/webview_flutter
Setup # pubspec.yaml dependencies: flutter: sdk: flutter webview_flutter: ^0.3.10
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!
Rendering the Android WebView
Working Example
Flutter Inspector
Flutter Inspector
Flutter Inspector
WebView Rendering on Android AndroidView _AndroidPlatformView RenderAndroidView : RenderBox WebView
renders contains … in requires WebViewFactory surface ID contains child PlatformViewController FlutterWebView : PlatformView creates WebViewFlutterPlugin registers Surface WebView contains
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
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
WebView Widget: NavigationDelegate typedef NavigationDecision NavigationDelegate(NavigationRequest n);
WebView Widget: 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
WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, );
WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel =
JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel =
JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel =
JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel =
JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
WebView Widget: 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 FIXED!-ish
Text Selection https:/ /github.com/flutter/flutter/issues/24584
Performance AndroidView is costly
What’s next
Setting a custom UserAgent https:/ /github.com/flutter/plugins/pull/968
Page loaded correctly https:/ /github.com/flutter/plugins/pull/1389
Loading an HTML string https:/ /github.com/flutter/plugins/pull/1312
Community Plugin
WebView community plugin https:/ /pub.dev/packages/flutter_webview_plugin
WebView community plugin MaterialApp( home: WebviewScaffold( url: url, appBar: AppBar(
title: Text("community webview"), ), ), );
WebView community plugin https:/ /pub.dev/packages/flutter_webview_plugin deprecated?
Contributing
Contributing
Contributing
Flutter is open-source. Submit a pull request!
57 L a r a M a r t í
n F l u t t e r / D a r t G D E A n d r o i d D e v e l o p e r @ L a r i k i Thank You!