WebViews in Flutter - Does it really work?

WebViews in Flutter - Does it really work?

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

8f5449e0199b2328460b35108934bcad?s=128

Lara Martín

May 14, 2019
Tweet

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