WebViews in Flutter - Does it really work?

Transcript

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

2. What is a WebView?

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

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

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

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!

7. Working Example

8. Rendering the Android WebView

9. Flutter Inspector

10. Flutter Inspector

11. Flutter Inspector

12. WebView Rendering on Android

13. WebView WebView Rendering on Android

14. AndroidView WebView child WebView Rendering on Android

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

    WebViewFactory registers

16. AndroidView WebView FlutterWebView : PlatformView WebView contains creates child …

    WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers

17. AndroidView WebView FlutterWebView : PlatformView WebView PlatformViewController contains creates renders

    Surface child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers

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

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

20. Rendering the iOS WKWebView

21. WebView Rendering on iOS • Similar to Android • RenderUiKitView

    will render a surface created in the PlatformViewIOS • Passes an ID

22. WebView Widget

23. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

24. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

25. WebView Widget: initialUrl WebView( ),

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

27. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

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

29. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

30. WebView Widget: onWebViewCreated WebView( initialUrl: … javascriptMode: … onWebViewCreated: (WebViewController

    controller) { _controller = controller; }, ),

31. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward()

    • goBack() • goForward() • reload() • clearCache()

32. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward()

    • goBack() • goForward() • reload() • clearCache()

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

34. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

35. WebView Widget: onPageFinished WebView( initialUrl: … javascriptMode: … onWebViewCreated: …

    onPageFinished: (url) { // use the URL } )

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

37. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

38. NavigationDelegate typedef NavigationDecision NavigationDelegate(NavigationRequest n);

39. NavigationDelegate WebView( navigationDelegate: (request) { bool isHost = request.url.startsWith( “https://flutter.dev”);

    if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } ),

40. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels

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

42. javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message)

    { print(message.message); }); WebView( javascriptChannels: {_channel}, ),

43. javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message)

    { print(message.message); }); Flutter side <script> LaraDemo.postMessage('Hello'); </script> HTML side

44. Limitations

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

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

47. Performance AndroidView is costly

48. What’s next

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

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

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

52. Contributing

53. Contributing

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

55. Thanks. @lariki Lara Martín