WebViews on Flutter

WebViews on Flutter

8f5449e0199b2328460b35108934bcad?s=128

Lara Martín

August 12, 2020
Tweet

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!