Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

Lara Martín

May 14, 2019
Tweet

More Decks by Lara Martín

Other Decks in Programming

Transcript

  1. 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. 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. AndroidView WebView FlutterWebView : PlatformView WebView contains creates child …

    WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
  4. AndroidView WebView FlutterWebView : PlatformView WebView PlatformViewController contains creates renders

    Surface child … in WebView Rendering on Android WebViewFlutterPlugin requires WebViewFactory registers
  5. 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. 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. WebView Rendering on iOS • Similar to Android • RenderUiKitView

    will render a surface created in the PlatformViewIOS • Passes an ID
  8. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  9. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  10. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  11. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  12. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

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

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

    if (isHost) return NavigationDecision.navigate; else return NavigationDecision.prevent; } ),
  16. WebView Widget • initialUrl • javaScriptMode • onWebViewCreated • onPageFinished

    • gestureRecognizers • navigationDelegate • javaScriptChannels
  17. javaScriptChannels var _channel = JavascriptChannel( name: 'LaraDemo', onMessageReceived: (JavascriptMessage message)

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