WebViews in Flutter - Does it really work?

WebViews in Flutter - Does it really work?

8f5449e0199b2328460b35108934bcad?s=128

Lara Martín

June 26, 2019
Tweet

Transcript

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

    Flutter/Dart GDE - Android Developer
  2. What is a WebView?

  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. https://pub.dev/packages/webview_flutter

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

  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 AndroidView _AndroidPlatformView RenderAndroidView : RenderBox WebView

    renders contains … in requires WebViewFactory surface ID contains child PlatformViewController FlutterWebView : PlatformView creates WebViewFlutterPlugin registers Surface WebView contains
  13. Rendering the iOS WKWebView

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

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

  16. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

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

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  18. WebView Widget: initialUrl WebView(),

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

  20. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  21. WebView Widget: javaScriptMode WebView( initialUrl: … javascriptMode: JavascriptMode.unrestricted, ),

  22. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  23. WebView Widget: onWebViewCreated WebView( initialUrl: … javascriptMode: … onWebViewCreated: (WebViewController

    controller) { _controller = controller; }, ),
  24. WebViewController • loadUrl(String url) • currentUrl() • canGoBack() • canGoForward()

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

    • goBack() • goForward() • reload() • clearCache()
  26. WebViewController: reload onPressed: () async { await _controller.reload(); }

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

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  28. WebView Widget: onPageFinished WebView( initialUrl: … javascriptMode: … onWebViewCreated: …

    onPageFinished: (url) { // use the URL } ),
  29. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  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. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  32. WebView Widget: NavigationDelegate typedef NavigationDecision NavigationDelegate(NavigationRequest n);

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

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

  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. WebView Widget • InitialUrl • javaScriptMode • onWebViewCreated • onPageFinished

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

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

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

    (JavascriptMessage message) { print(message.message); }); Flutter side
  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. Limitations

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

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

  44. Performance AndroidView is costly

  45. What’s next

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

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

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

  49. Community Plugin

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

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

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

  53. Contributing

  54. Contributing

  55. Contributing

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

  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!