WebViews in Flutter - Does it really work?

Transcript

1. 1.

   WebViews in Flutter Does it really work? Lara Martín @Lariki

   Flutter/Dart GDE - Android Developer
2. 2.

   What is a WebView?

3. 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
4. 4.

   https://pub.dev/packages/webview_flutter

5. 5.

   Setup # pubspec.yaml dependencies: flutter: sdk: flutter webview_flutter: ^0.3.9+1

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

   Working Example

8. 8.

   Rendering the Android WebView

9. 9.

   Flutter Inspector

10. 10.

    Flutter Inspector

11. 11.

    Flutter Inspector

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

    Rendering the iOS WKWebView

14. 14.

    WebView Rendering on iOS • Similar to Android • RenderUiKitView

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

    WebView Widget

16. 16.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
17. 17.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
18. 18.

    WebView Widget: initialUrl WebView(),

19. 19.

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

20. 20.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
21. 21.

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

22. 22.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
23. 23.

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

    controller) { _controller = controller; }, ),
24. 24.

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

    • goBack() • goForward() • reload() • clearCache()
25. 25.

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

    • goBack() • goForward() • reload() • clearCache()
26. 26.

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

27. 27.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
28. 28.

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

    onPageFinished: (url) { // use the URL } ),
29. 29.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
30. 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
31. 31.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
32. 32.

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

33. 33.

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

34. 34.

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

35. 35.

    WebView Widget: NavigationDelegate WebView( navigationDelegate: (request) { bool isHost =

    request.url.startsWith( “https://flutter.dev”); if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } );
36. 36.

    WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
37. 37.

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

38. 38.

    WebView Widget: javaScriptChannels WebView( javascriptChannels: {_channel}, ); var _channel =

    JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message) { print(message.message); });
39. 39.

    WebView Widget: javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived:

    (JavascriptMessage message) { print(message.message); }); Flutter side
40. 40.

    WebView Widget: javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived:

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

    Limitations

42. 42.

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

43. 43.

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

44. 44.

    Performance AndroidView is costly

45. 45.

    What’s next

46. 46.

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

47. 47.

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

48. 48.

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

49. 49.

    Community Plugin

50. 50.

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

51. 51.

    WebView community plugin MaterialApp( home: WebviewScaffold( url: url, appBar: AppBar(

    title: Text("community webview"), ), ), );
52. 52.

    Contributing

53. 53.

    Contributing

54. 54.

    Contributing

55. 55.

    Contributing

56. 56.

    Flutter is open-source. Submit a pull request!

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