WebViews on Flutter

Presented at https://www.flutteronair.com/

Transcript

1. WebViews in Flutter Does it really work? Lara Martín @Lariki Flutter/Dart GDE - Android Developer Flutter onAir GDG Brno, Czechia
2. What is a WebView?
3. 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
4. https://pub.dev/packages/webview_flutter
5. Setup # pubspec.yaml dependencies: flutter: sdk: flutter webview_flutter: ^0.3.22
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!
7. 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!
8. Rendering the Android WebView
9. Working Example
10. Flutter Inspector
11. Flutter Inspector
12. Flutter Inspector
13. Flutter Inspector
14. 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
15. Rendering the iOS WKWebView
16. WebView Rendering on iOS • Similar to Android • RenderUiKitView will render a surface created in the PlatformViewIOS • Passes an ID
17. Hybrid Composition New in Flutter 1.20!
18. WebView platform Texture rendering (default) •AndroidWebView •CupertinoWebView Hybrid composition •SurfaceAndroidWebView
19. Hybrid Composition SurfaceAndroidWebView PlatformViewRenderBox WebView … requires PlatformViewSurfaceFactory ID contains child creates WebViewFlutterPlugin registers WebView Skia AndroidViewSurface contains
20. WebView Widget
21. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
22. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
23. WebView Widget: initialUrl WebView( initialUrl: “https://www.flutter.dev/", ),
24. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
25. WebView Widget: javaScriptMode WebView( initialUrl: … javascriptMode: JavascriptMode.unrestricted, ),
26. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
27. WebView Widget: onWebViewCreated WebView( initialUrl: … javascriptMode: … onWebViewCreated: (WebViewController controller) { _controller = controller; }, ),
28. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward() • goBack() • goForward() • reload() • clearCache()
29. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward() • goBack() • goForward() • reload() • clearCache()
30. WebViewController: reload onPressed: () async { await _controller.reload(); }
31. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
32. WebView Widget: onPageFinished WebView( initialUrl: … javascriptMode: … onWebViewCreated: … onPageFinished: (url) { // use the URL } ),
33. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
34. 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
35. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
36. WebView Widget: NavigationDelegate WebView( navigationDelegate: (request) { bool isHost = request.url.startsWith( “https://flutter.dev”); if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } );
37. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished, onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
38. WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, );
39. WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
40. WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
41. WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
42. WebView Widget: javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); }); Flutter side
43. WebView Widget: javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); }); Flutter side <script> LaraDemo.postMessage('Hello'); </script> HTML side
44. Limitations
45. Performance AndroidView is costly
46. Known Issues • Accessibility (Talkback) • Keyboard (can’t change language, hides content) • Text selection (doesn’t respond to touch events, handles not showing on Android) • Text input (passwords) • Animation (is slow on Android, scroll)
47. Hybrid Composition fixes most issues https:/ /github.com/flutter/flutter/issues/61133
48. Hybrid Composition fixes most issues https:/ /github.com/flutter/plugins/pull/2883
49. What’s next
50. Improved Scrolling https:/ /github.com/flutter/plugins/pull/2762
51. Add pinch to zoom for Android https:/ /github.com/flutter/plugins/pull/2451
52. Contributing
53. Contributing
54. Contributing
55. Flutter is open-source. Submit a pull request!
56. 56 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!