WebViews in Flutter - Does it really work?

WebViews in Flutter - Does it really work?

Talk given at Flutter Berlin meetup
https://www.meetup.com/flutter-berlin/events/261016228/

8f5449e0199b2328460b35108934bcad?s=128

Lara Martín

May 14, 2019
Tweet

Transcript

  1. 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
  2. 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!
  3. 16.

    AndroidView WebView FlutterWebView : PlatformView WebView contains creates child …

    WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
  4. 17.

    AndroidView WebView FlutterWebView : PlatformView WebView PlatformViewController contains creates renders

    Surface child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
  5. 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
  6. 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
  7. 21.

    WebView Rendering on iOS • Similar to Android • RenderUiKitView

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

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  9. 24.

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  10. 27.

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  11. 29.

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  12. 31.
  13. 32.
  14. 34.

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  15. 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
  16. 37.

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  17. 39.

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

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

    WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  19. 42.
  20. 43.

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

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