WebViews in Flutter - Does it really work?

Talk given at Flutter Berlin meetup
https://www.meetup.com/flutter-berlin/events/261016228/

Transcript

1. WebViews in Flutter Lara Martín @lariki Does it really work?
2. What is a WebView?
3. 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
4. https:/ /pub.dev/packages/webview_flutter
5. Setup # pubspec.yaml dependencies: flutter: sdk: flutter webview_flutter: ^0.3.6
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. Working Example
8. Rendering the Android WebView
9. Flutter Inspector
10. Flutter Inspector
11. Flutter Inspector
12. WebView Rendering on Android
13. WebView WebView Rendering on Android
14. AndroidView WebView child WebView Rendering on Android
15. WebView Rendering on Android AndroidView WebView WebViewFlutterPlugin child requires … WebViewFactory registers
16. AndroidView WebView FlutterWebView : PlatformView WebView contains creates child … WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
17. AndroidView WebView FlutterWebView : PlatformView WebView PlatformViewController contains creates renders Surface child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
18. 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
19. 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
20. Rendering the iOS WKWebView
21. WebView Rendering on iOS • Similar to Android • RenderUiKitView will render a surface created in the PlatformViewIOS • Passes an ID
22. WebView Widget
23. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
24. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
25. WebView Widget: initialUrl WebView( ),
26. WebView Widget: initialUrl WebView( initialUrl: “https://www.flutter.dev/", ),
27. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
28. WebView Widget: javaScriptMode WebView( initialUrl: … javascriptMode: JavascriptMode.unrestricted, ),
29. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
30. WebView Widget: onWebViewCreated WebView( initialUrl: … javascriptMode: … onWebViewCreated: (WebViewController controller) { _controller = controller; }, ),
31. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward() • goBack() • goForward() • reload() • clearCache()
32. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward() • goBack() • goForward() • reload() • clearCache()
33. WebViewController: reload onPressed: () async { await _controller.reload(); }
34. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
35. WebView Widget: onPageFinished WebView( initialUrl: … javascriptMode: … onWebViewCreated: … onPageFinished: (url) { // use the URL } )
36. 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
37. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
38. NavigationDelegate typedef NavigationDecision NavigationDelegate(NavigationRequest n);
39. NavigationDelegate WebView( navigationDelegate: (request) { bool isHost = request.url.startsWith( “https://flutter.dev”); if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } ),
40. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished • gestureRecognizers • navigationDelegate • javaScriptChannels
41. javaScriptChannels WebView( javascriptChannels: {_channel}, ),
42. javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); }); WebView( javascriptChannels: {_channel}, ),
43. javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); }); Flutter side <script> LaraDemo.postMessage('Hello'); </script> HTML side
44. Limitations
45. Input Fields https:/ /github.com/flutter/flutter/issues/19718
46. Text Selection https:/ /github.com/flutter/flutter/issues/24584
47. Performance AndroidView is costly
48. What’s next
49. Loading an HTML string https:/ /github.com/flutter/plugins/pull/1312
50. Setting a custom UserAgent https:/ /github.com/flutter/plugins/pull/968
51. Page loaded correctly https:/ /github.com/flutter/plugins/pull/1389
52. Contributing
53. Contributing
54. Flutter is open-source. Submit a pull request!
55. Thanks. @lariki Lara Martín