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
280
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
53
Accesibility on Flutter
laramartin
0
220
WebViews on Flutter
laramartin
1
340
Accessibility on Flutter
laramartin
2
640
Flutter for Web - Codemotion Berlin 2019
laramartin
2
61
Supporting Each Other - Growth for Juniors and Seniors
laramartin
1
300
Flutter for Web: Beautiful Apps and Websites with a Single Codebase
laramartin
1
230
Flutter Study Jam @ GDG Hannover
laramartin
1
260
WebViews in Flutter - Does it really work?
laramartin
2
400
Other Decks in Programming
See All in Programming
CSC307 Lecture 13
javiergs
PRO
0
150
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Jetpack for KMP
fornewid
1
290
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Introduction to GitOps
hwchiu
0
110
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Unsuck your backbone
ammeep
666
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
The Invisible Customer
myddelton
117
13k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Building an army of robots
kneath
301
42k
The Language of Interfaces
destraynor
151
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
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