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

    View full-size slide

  2. What is a
    WebView?

    View full-size slide

  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

    View full-size slide

  4. https://pub.dev/packages/webview_flutter

    View full-size slide

  5. Setup
    # pubspec.yaml
    dependencies:
    flutter:
    sdk: flutter
    webview_flutter: ^0.3.22

    View full-size slide

  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!

    View full-size slide

  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!

    View full-size slide

  8. Rendering the
    Android WebView

    View full-size slide

  9. Working Example

    View full-size slide

  10. Flutter Inspector

    View full-size slide

  11. Flutter Inspector

    View full-size slide

  12. Flutter Inspector

    View full-size slide

  13. Flutter Inspector

    View full-size slide

  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

    View full-size slide

  15. Rendering the iOS
    WKWebView

    View full-size slide

  16. WebView Rendering on iOS
    • Similar to Android
    • RenderUiKitView will render a surface created in the PlatformViewIOS
    • Passes an ID

    View full-size slide

  17. Hybrid Composition
    New in Flutter 1.20!

    View full-size slide

  18. WebView platform
    Texture rendering (default)
    •AndroidWebView
    •CupertinoWebView
    Hybrid composition
    •SurfaceAndroidWebView

    View full-size slide

  19. Hybrid Composition
    SurfaceAndroidWebView
    PlatformViewRenderBox
    WebView

    requires
    PlatformViewSurfaceFactory
    ID
    contains
    child
    creates
    WebViewFlutterPlugin
    registers
    WebView
    Skia
    AndroidViewSurface
    contains

    View full-size slide

  20. WebView Widget

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. WebView Widget: initialUrl
    WebView(
    initialUrl: “https://www.flutter.dev/",
    ),

    View full-size slide

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

    View full-size slide

  25. WebView Widget: javaScriptMode
    WebView(
    initialUrl: …
    javascriptMode: JavascriptMode.unrestricted,
    ),

    View full-size slide

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

    View full-size slide

  27. WebView Widget: onWebViewCreated
    WebView(
    initialUrl: …
    javascriptMode: …
    onWebViewCreated: (WebViewController controller) {
    _controller = controller;
    },
    ),

    View full-size slide

  28. WebViewController
    • loadUrl(String url)
    • currentUrl()
    • canGoBack()
    • canGoForward()
    • goBack()
    • goForward()
    • reload()
    • clearCache()

    View full-size slide

  29. WebViewController
    • loadUrl(String url)
    • currentUrl()
    • canGoBack()
    • canGoForward()
    • goBack()
    • goForward()
    • reload()
    • clearCache()

    View full-size slide

  30. WebViewController: reload
    onPressed: () async {
    await _controller.reload();
    }

    View full-size slide

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

    View full-size slide

  32. WebView Widget: onPageFinished
    WebView(
    initialUrl: …
    javascriptMode: …
    onWebViewCreated: …
    onPageFinished: (url) {
    // use the URL
    }
    ),

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  36. WebView Widget: NavigationDelegate
    WebView(
    navigationDelegate: (request) {
    bool isHost = request.url.startsWith(
    “https://flutter.dev”);
    if (isHost)
    return NavigationDecision.navigate;
    else
    return NavigationDecision.prevent;
    }
    );

    View full-size slide

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

    View full-size slide

  38. WebView Widget: javaScriptChannels
    WebView(
    javascriptChannels: {_channel},
    );

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. WebView Widget: javaScriptChannels
    var _channel = JavascriptChannel(
    name: 'LaraDemo',
    onMessageReceived: (JavascriptMessage message) {
    print(message.message);
    });
    Flutter side
    <br/>LaraDemo.postMessage('Hello');<br/>
    HTML side

    View full-size slide

  44. Performance
    AndroidView is costly

    View full-size slide

  45. 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)

    View full-size slide

  46. Hybrid Composition fixes most issues
    https:/
    /github.com/flutter/flutter/issues/61133

    View full-size slide

  47. Hybrid Composition fixes most issues
    https:/
    /github.com/flutter/plugins/pull/2883

    View full-size slide

  48. What’s next

    View full-size slide

  49. Improved Scrolling
    https:/
    /github.com/flutter/plugins/pull/2762

    View full-size slide

  50. Add pinch to zoom for Android
    https:/
    /github.com/flutter/plugins/pull/2451

    View full-size slide

  51. Contributing

    View full-size slide

  52. Contributing

    View full-size slide

  53. Contributing

    View full-size slide

  54. Flutter is open-source.
    Submit a pull request!

    View full-size slide

  55. 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!

    View full-size slide