WebViews on Flutter

Presented at https://www.flutteronair.com/

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