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
480
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
55
Accesibility on Flutter
laramartin
0
230
WebViews on Flutter
laramartin
1
350
Accessibility on Flutter
laramartin
2
750
Flutter for Web - Codemotion Berlin 2019
laramartin
2
64
Supporting Each Other - Growth for Juniors and Seniors
laramartin
1
350
Flutter for Web: Beautiful Apps and Websites with a Single Codebase
laramartin
1
280
Flutter Study Jam @ GDG Hannover
laramartin
1
300
Supporting Each Other - Growth for Juniors and Seniors
laramartin
0
320
Other Decks in Programming
See All in Programming
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.2k
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
830
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
160
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
240
バッチを作らなきゃとなったときに考えること
irof
2
550
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
750
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.9k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.6k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
CloudNativePGを布教したい
nnaka2992
0
120
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Embracing the Ebb and Flow
colly
84
4.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Code Reviewing Like a Champion
maltzj
521
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Faster Mobile Websites
deanohume
306
31k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
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!