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
65
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
490
Other Decks in Programming
See All in Programming
Vibe Codingをせずに Clineを使っている
watany
17
5.4k
プログラミング教育のコスパの話
superkinoko
0
130
ミリしらMCP勉強会
watany
4
710
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
110
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
150
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
150
趣味全開のAITuber開発
kokushin
0
180
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
380
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
670
DataStoreをテストする
mkeeda
0
270
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1.2k
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
300
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Designing Experiences People Love
moore
141
23k
Adopting Sorbet at Scale
ufuk
75
9.3k
Embracing the Ebb and Flow
colly
85
4.6k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Rails Girls Zürich Keynote
gr2m
94
13k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Building Adaptive Systems
keathley
41
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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