flutterkeyboardflutter-inappwebview

Keyboard doesn't appear in Flutter in app web view


In my Flutter code I use flutter_inappwebview to open a web page inside the application so that the user can enter some data and submit, in some cases which I can't detect the keyboard doesn't appear so users can't enter data, it happens for both Android and iOS. what should I do?

          InAppWebView(
                    initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(),
                        android: AndroidInAppWebViewOptions(useHybridComposition: true),
                        ios: IOSInAppWebViewOptions(allowsInlineMediaPlayback: true)),
                    onLoadStart: (controller, url) {
                      if (url.toString() == state.paymentState.redirectBackUrl) {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) =>
                                    const Scaffold(body: Center(child: Loader()), backgroundColor: Colors.white)));
                        StoreProvider.of<AppState>(navigatorKey.currentContext).dispatch(CheckPayment());
                      }
                    },
                    onLoadStop: (controller, url) async {},
                    onTitleChanged: (controller, title) {},
                    onReceivedServerTrustAuthRequest: (controller, challenge) async {
                      return ServerTrustAuthResponse(action: ServerTrustAuthResponseAction.PROCEED);
                    },
                    onWebViewCreated: (controller) async {
                      await controller.postUrl(
                          url: Uri(
                              scheme: url['scheme'],
                              host: url['host'],
                              port: int.parse(url['port']),
                              path: url['path']),
                          postData: postData);
                      controller.addJavaScriptHandler(handlerName: 'callBackUrl', callback: (args) {});
                    },
                  )

Solution

  • I figured out the issue, the keyboard appears behind the InAppWebView widget, so I wrapped the InAppWebView widget with Expanded in a Column and under it, I added:

    SizedBox(height: MediaQuery.of(context).viewInsets.bottom / 30)

    MediaQuery.of(context).viewInsets.bottom is used to obtain the size of the bottom part of the window where it is obscured by UI elements like the keyboard and if there is no keyboard used, it has the value 0.

    This will decrease the height obscured by the InAppWebView widget as much as (the height of the keyboard)/30, this is very little height but will push the InAppWebView in case of using the keyboard.