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 Slide

  2. What is a
    WebView?

    View 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 Slide

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

    View Slide

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

    View 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 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 Slide

  8. Rendering the
    Android WebView

    View Slide

  9. Working Example

    View Slide

  10. Flutter Inspector

    View Slide

  11. Flutter Inspector

    View Slide

  12. Flutter Inspector

    View Slide

  13. Flutter Inspector

    View 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 Slide

  15. Rendering the iOS
    WKWebView

    View Slide

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

    View Slide

  17. Hybrid Composition
    New in Flutter 1.20!

    View Slide

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

    View Slide

  19. Hybrid Composition
    SurfaceAndroidWebView
    PlatformViewRenderBox
    WebView

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

    View Slide

  20. WebView Widget

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  44. Limitations

    View Slide

  45. Performance
    AndroidView is costly

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

  49. What’s next

    View Slide

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

    View Slide

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

    View Slide

  52. Contributing

    View Slide

  53. Contributing

    View Slide

  54. Contributing

    View Slide

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

    View Slide

  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!

    View Slide