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
June 26, 2019
Programming
1
400
WebViews in Flutter - Does it really work?
Talk given at Flutter Wrocław meetup
https://www.meetup.com/Flutter-Wroc%C5%82aw/events/261982616/
Lara Martín
June 26, 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
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
API Platform 4.2: Redefining API Development
soyuka
0
110
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
はじめてのMaterial3 Expressive
ym223
2
900
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
アセットのコンパイルについて
ojun9
0
130
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf 2023
tenderlove
30
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Music & Morning Musume
bryan
46
6.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
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.9+1
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 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 typedef NavigationDecision NavigationDelegate(NavigationRequest n);
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 var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived:
(JavascriptMessage message) { print(message.message); }); Flutter side
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
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
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"), ), ), );
Contributing
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!