WebViews in Flutter - Does it really work?

Talk given at Flutter Berlin meetup
https://www.meetup.com/flutter-berlin/events/261016228/

Transcript

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

   View Slide

2. What is a WebView?
   

   View Slide

3. Why we need WebViews?
   Perform social login
   Show static content (e.g. FAQ )
   Payment confirmation
   Use cases
   Making an app that is just a web
   Avoid for
   

   View Slide

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

   View Slide

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

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

   View Slide

8. Rendering the Android
   WebView
   

   View Slide

9. Flutter Inspector
   

   View Slide

10. Flutter Inspector
    

    View Slide

11. Flutter Inspector
    

    View Slide

12. WebView Rendering on Android
    

    View Slide

13. WebView
    WebView Rendering on Android
    

    View Slide

14. AndroidView
    WebView
    child
    WebView Rendering on Android
    

    View Slide

15. WebView Rendering on Android
    AndroidView
    WebView WebViewFlutterPlugin
    child
    requires
    … WebViewFactory
    registers
    

    View Slide

16. AndroidView
    WebView
    FlutterWebView :
    PlatformView
    WebView
    contains
    creates
    child
    …
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers
    

    View Slide

17. AndroidView
    WebView
    FlutterWebView :
    PlatformView
    WebView
    PlatformViewController
    contains
    creates
    renders
    Surface
    child
    …
    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers
    

    View Slide

18. AndroidView
    _AndroidPlatformView
    RenderAndroidView :
    RenderBox
    WebView
    FlutterWebView :
    PlatformView
    WebView
    PlatformViewController
    contains
    creates
    renders
    Surface
    contains
    contains
    child
    …
    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers
    

    View Slide

19. AndroidView
    _AndroidPlatformView
    RenderAndroidView :
    RenderBox
    WebView
    FlutterWebView :
    PlatformView
    WebView
    PlatformViewController
    contains
    creates
    renders
    Surface
    contains
    contains
    child
    …
    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers
    Surface ID
    

    View Slide

20. Rendering the iOS
    WKWebView
    

    View Slide

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

    View Slide

22. WebView Widget
    

    View Slide

23. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels
    

    View Slide

24. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels
    

    View Slide

25. WebView Widget: initialUrl
    WebView( ),
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels
    

    View Slide

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

    View Slide

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

37. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels
    

    View Slide

38. NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);
    

    View Slide

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

    View Slide

40. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels
    

    View Slide

41. javaScriptChannels
    WebView(
    javascriptChannels: {_channel},
    ),
    

    View Slide

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

    View Slide

43. 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. Input Fields
    https:/
    /github.com/flutter/flutter/issues/19718
    

    View Slide

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

    View Slide

47. Performance
    AndroidView is costly
    

    View Slide

48. What’s next
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. Contributing
    

    View Slide

53. Contributing
    

    View Slide

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

    View Slide

55. Thanks.
    @lariki
    Lara Martín
    

    View Slide