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
320
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
56
Accesibility on Flutter
laramartin
0
240
WebViews on Flutter
laramartin
1
360
Accessibility on Flutter
laramartin
2
760
Flutter for Web - Codemotion Berlin 2019
laramartin
2
66
Supporting Each Other - Growth for Juniors and Seniors
laramartin
1
350
Flutter for Web: Beautiful Apps and Websites with a Single Codebase
laramartin
1
290
Flutter Study Jam @ GDG Hannover
laramartin
1
310
WebViews in Flutter - Does it really work?
laramartin
2
500
Other Decks in Programming
See All in Programming
ComposeでWebアプリを作る技術
tbsten
0
120
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
170
Cursor/Devin全社導入の理想と現実
saitoryc
22
15k
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
4
910
PHP で学ぶ OAuth 入門
azuki
1
210
Jakarta EE Meets AI
ivargrimstad
0
180
Thank you <💅>, What's the Next?
ahoxa
1
530
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
120
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
160
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
350
The Evolution of the CRuby Build System
kateinoigakukun
0
720
Sharing features among Android applications: experience feedback
jbvincey
0
110
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Building an army of robots
kneath
304
45k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Producing Creativity
orderedlist
PRO
344
40k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fireside Chat
paigeccino
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Statistics for Hackers
jakevdp
798
220k
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