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
400
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
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
Supporting Each Other - Growth for Juniors and Seniors
laramartin
0
280
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Rust.Nagoya #1
codemountains
0
170
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
800
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
CSC307 Lecture 08
javiergs
PRO
0
330
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
5.9k
How to train your dragon (web standard)
notwaldorf
79
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Making Projects Easy
brettharned
111
5.7k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Embracing the Ebb and Flow
colly
81
4.3k
The Mythical Team-Month
searls
217
43k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
A Philosophy of Restraint
colly
200
16k
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!