WebViews in Flutter - Does it really work?

Slide 1

Slide 1 text

WebViews in Flutter Lara Martín @lariki Does it really work?

Slide 2

Slide 2 text

What is a WebView?

Slide 3

Slide 3 text

Why we need WebViews? Perform social login Show static content (e.g. FAQ ) Payment conﬁrmation Use cases Making an app that is just a web Avoid for

Slide 4

Slide 4 text

https:/ /pub.dev/packages/webview_ﬂutter

Slide 5

Slide 5 text

Setup # pubspec.yaml dependencies: flutter: sdk: flutter webview_flutter: ^0.3.6

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

Working Example

Slide 8

Slide 8 text

Rendering the Android WebView

Slide 9

Slide 9 text

Flutter Inspector

Slide 10

Slide 10 text

Flutter Inspector

Slide 11

Slide 11 text

Flutter Inspector

Slide 12

Slide 12 text

WebView Rendering on Android

Slide 13

Slide 13 text

WebView WebView Rendering on Android

Slide 14

Slide 14 text

AndroidView WebView child WebView Rendering on Android

Slide 15

Slide 15 text

WebView Rendering on Android AndroidView WebView WebViewFlutterPlugin child requires … WebViewFactory registers

Slide 16

Slide 16 text

AndroidView WebView FlutterWebView : PlatformView WebView contains creates child … WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers

Slide 17

Slide 17 text

AndroidView WebView FlutterWebView : PlatformView WebView PlatformViewController contains creates renders Surface child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Rendering the iOS WKWebView

Slide 21

Slide 21 text

WebView Rendering on iOS • Similar to Android • RenderUiKitView will render a surface created in the PlatformViewIOS • Passes an ID

Slide 22

Slide 22 text

WebView Widget

Slide 23

Slide 23 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 24

Slide 24 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 25

Slide 25 text

WebView Widget: initialUrl WebView( ),

Slide 26

Slide 26 text

WebView Widget: initialUrl WebView( initialUrl: “https://www.flutter.dev/", ),

Slide 27

Slide 27 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 28

Slide 28 text

WebView Widget: javaScriptMode WebView( initialUrl: … javascriptMode: JavascriptMode.unrestricted, ),

Slide 29

Slide 29 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 30

Slide 30 text

WebView Widget: onWebViewCreated WebView( initialUrl: … javascriptMode: … onWebViewCreated: (WebViewController controller) { _controller = controller; }, ),

Slide 31

Slide 31 text

WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward() • goBack() • goForward() • reload() • clearCache()

Slide 32

Slide 32 text

WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward() • goBack() • goForward() • reload() • clearCache()

Slide 33

Slide 33 text

WebViewController: reload onPressed: () async { await _controller.reload(); }

Slide 34

Slide 34 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 35

Slide 35 text

WebView Widget: onPageFinished WebView( initialUrl: … javascriptMode: … onWebViewCreated: … onPageFinished: (url) { // use the URL } )

Slide 36

Slide 36 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels The Power of WebViews in Flutter, by Emily Fortuna https:/ /medium.com/ﬂutter-io/the-power-of- webviews-in-ﬂutter-a56234b57df2

Slide 37

Slide 37 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 38

Slide 38 text

NavigationDelegate typedef NavigationDecision NavigationDelegate(NavigationRequest n);

Slide 39

Slide 39 text

NavigationDelegate WebView( navigationDelegate: (request) { bool isHost = request.url.startsWith( “https://flutter.dev”); if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } ),

Slide 40

Slide 40 text

WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels

Slide 41

Slide 41 text

javaScriptChannels WebView( javascriptChannels: {_channel}, ),

Slide 42

Slide 42 text

javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); }); WebView( javascriptChannels: {_channel}, ),

Slide 43

Slide 43 text

javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); }); Flutter side LaraDemo.postMessage('Hello'); HTML side