flutter: SFSafariViewController doesn't open like a native iOS modal

Question

In order to use SFSafariViewController in my Flutter app, I am using this package: flutter_inappwebview: ^3.3.0+3

While this works, there is a bug in the animation through which the SFSafariViewController appears.

Notice this:

Actual Behaviour

Expected Behaviour

Notice how in the second GIF, the app itself is pushed back, whereas in the first GIF, we can see a semi-transparent view created instead of the native push back animation for the app.

Here's the code that I am using:

final ChromeSafariBrowser browser =
              MyChromeSafariBrowser(MyInAppBrowser());
          await browser.open(
              url: 'https://google.com',
              options: ChromeSafariBrowserClassOptions(
                  ios: IOSSafariOptions(
                      barCollapsingEnabled: true,
                      presentationStyle: IOSUIModalPresentationStyle.POPOVER)));

Here's the Gist for the MyChromeSafariBrowser and MyInAppBrowser class.

Can you please help me with this?

score 1 · Answer 1 · answered Jun 16 '20 at 09:03

You should submit an issue to flutter_inappwebview. The package uses a native modal presentations and it looks like it is not doing it correctly.

If you want to use the modal_bottom_sheet package as the gif you attached, then you can't use ChromeSafariBrowser, and you would need to use InAppWebView instead. ChromeSafariBrowser is a native activity outside Flutter while InAppWebView is a native view wrapped inside Flutter.


InAppWebView(
                  initialUrl: "https://flutter.dev/",
                  initialHeaders: {},
                  initialOptions: InAppWebViewGroupOptions(
                    crossPlatform: InAppWebViewOptions(
                        debuggingEnabled: true,
                    )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
                    setState(() {
                      this.url = url;
                    });
                  },
                  onLoadStop: (InAppWebViewController controller, String url) async {
                    setState(() {
                      this.url = url;
                    });
                  },
                  onProgressChanged: (InAppWebViewController controller, int progress) {
                    setState(() {
                      this.progress = progress / 100;
                    });
                  },
                ),

score 0 · Accepted Answer · answered Jun 30 '20 at 13:02

0

This was fixed in the release v4.0.0 and it is now possible to get the expected behaviour by setting

presentationStyle: IOSUIModalPresentationStyle.POPOVER

More information here: https://pub.dev/packages/flutter_inappwebview#-changelog-tab-

answered Jun 30 '20 at 13:02

Ayush Shekhar

1,483
4
16
32

flutter: SFSafariViewController doesn't open like a native iOS modal

2 Answers2