WebViews in Flutter - Does it really work?

Talk given at Flutter Wrocław meetup
https://www.meetup.com/Flutter-Wroc%C5%82aw/events/261982616/

Transcript

1. WebViews in Flutter
   Does it really work?
   Lara Martín
   @Lariki
   Flutter/Dart GDE - Android Developer
   

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

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

13. Rendering the iOS
    WKWebView
    

    View Slide

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

    View Slide

15. WebView
    Widget
    

    View Slide

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

    View Slide

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

    View Slide

18. WebView Widget: initialUrl
    WebView(),
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

41. Limitations
    

    View Slide

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

    View Slide

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

    View Slide

44. Performance
    AndroidView is costly
    

    View Slide

45. What’s next
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. Community
    Plugin
    

    View Slide

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

    View Slide

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

    View Slide

52. Contributing
    

    View Slide

53. Contributing
    

    View Slide

54. Contributing
    

    View Slide

55. Contributing
    

    View Slide

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

    View Slide

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