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

WebViews in Flutter - Does it really work?

WebViews in Flutter - Does it really work?

Lara Martín

June 26, 2019
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

    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.9+1

    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. Working Example

    View full-size slide

  8. Rendering the
    Android WebView

    View full-size slide

  9. Flutter Inspector

    View full-size slide

  10. Flutter Inspector

    View full-size slide

  11. Flutter Inspector

    View full-size slide

  12. 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

  13. Rendering the iOS
    WKWebView

    View full-size slide

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

    View full-size slide

  15. WebView
    Widget

    View full-size slide

  16. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View full-size slide

  17. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View full-size slide

  18. WebView Widget: initialUrl
    WebView(),

    View full-size slide

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

    View full-size slide

  20. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View full-size slide

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

    View full-size slide

  29. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View full-size slide

  30. 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

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

    View full-size slide

  32. WebView Widget: NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);

    View full-size slide

  33. WebView Widget: NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);

    View full-size slide

  34. WebView Widget: NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);

    View full-size slide

  35. 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

  36. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 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

  41. Input Fields
    https:/
    /github.com/flutter/flutter/issues/19718

    View full-size slide

  42. Text Selection
    https:/
    /github.com/flutter/flutter/issues/24584

    View full-size slide

  43. Performance
    AndroidView is costly

    View full-size slide

  44. What’s next

    View full-size slide

  45. Loading an HTML string
    https:/
    /github.com/flutter/plugins/pull/1312

    View full-size slide

  46. Setting a custom UserAgent
    https:/
    /github.com/flutter/plugins/pull/968

    View full-size slide

  47. Page loaded correctly
    https:/
    /github.com/flutter/plugins/pull/1389

    View full-size slide

  48. Community
    Plugin

    View full-size slide

  49. WebView community plugin
    https:/
    /pub.dev/packages/flutter_webview_plugin

    View full-size slide

  50. WebView community plugin
    MaterialApp(
    home: WebviewScaffold(
    url: url,
    appBar: AppBar(
    title: Text("community webview"),
    ),
    ),
    );

    View full-size slide

  51. Contributing

    View full-size slide

  52. Contributing

    View full-size slide

  53. Contributing

    View full-size slide

  54. Contributing

    View full-size slide

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

    View full-size slide

  56. 57
    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