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
280
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
49
Accesibility on Flutter
laramartin
0
200
WebViews on Flutter
laramartin
1
320
Accessibility on Flutter
laramartin
2
550
Flutter for Web - Codemotion Berlin 2019
laramartin
2
60
Supporting Each Other - Growth for Juniors and Seniors
laramartin
1
270
Flutter for Web: Beautiful Apps and Websites with a Single Codebase
laramartin
1
210
Flutter Study Jam @ GDG Hannover
laramartin
1
230
WebViews in Flutter - Does it really work?
laramartin
2
340
Other Decks in Programming
See All in Programming
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
上手な探索的テストとその上達方法について
matsu802
4
650
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
14k
TDDと今まで
kanayannet
0
140
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
Featured
See All Featured
Optimizing for Happiness
mojombo
369
69k
A designer walks into a library…
pauljervisheath
199
23k
Building Adaptive Systems
keathley
29
1.8k
The Cult of Friendly URLs
andyhume
73
5.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Docker and Python
trallard
33
2.6k
We Have a Design System, Now What?
morganepeng
42
6.7k
Building an army of robots
kneath
300
41k
Web Components: a chance to create the future
zenorocha
304
41k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Code Reviewing Like a Champion
maltzj
512
39k
What the flash - Photography Introduction
edds
64
11k
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!