Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebViews on Flutter

WebViews on Flutter

Lara Martín

August 12, 2020
Tweet

More Decks by Lara Martín

Other Decks in Programming

Transcript

  1. WebViews in Flutter Does it really work? Lara Martín @Lariki

    Flutter/Dart GDE - Android Developer Flutter onAir GDG Brno, Czechia
  2. 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
  3. 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!
  4. 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!
  5. 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
  6. WebView Rendering on iOS • Similar to Android • RenderUiKitView

    will render a surface created in the PlatformViewIOS • Passes an ID
  7. Hybrid Composition SurfaceAndroidWebView PlatformViewRenderBox WebView … requires PlatformViewSurfaceFactory ID contains

    child creates WebViewFlutterPlugin registers WebView Skia AndroidViewSurface contains
  8. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  9. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  10. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  11. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  12. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  13. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  14. 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
  15. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  16. WebView Widget: NavigationDelegate WebView( navigationDelegate: (request) { bool isHost =

    request.url.startsWith( “https://flutter.dev”); if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } );
  17. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished,

    onPageStarted • gestureRecognizers • navigationDelegate • javaScriptChannels
  18. WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel =

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

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

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

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

    (JavascriptMessage message) { print(message.message); }); Flutter side <script> LaraDemo.postMessage('Hello'); </script> HTML side
  23. 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)
  24. 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!