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
340
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
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
個人軟體時代
ethanhuang13
0
330
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
私の後悔をAWS DMSで解決した話
hiramax
4
210
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
はじめてのMaterial3 Expressive
ym223
2
860
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
550
AI時代のUIはどこへ行く?
yusukebe
18
9k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.6k
旅行プランAIエージェント開発の裏側
ippo012
2
910
AIコーディングAgentとの向き合い方
eycjur
0
270
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
140
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
180
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
How to train your dragon (web standard)
notwaldorf
96
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Navigating Team Friction
lara
189
15k
Balancing Empowerment & Direction
lara
3
620
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Facilitating Awesome Meetings
lara
55
6.5k
Bash Introduction
62gerente
615
210k
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