Single Child Scoll View doesn't scroll up screens when soft keyboard appears in Flutter Webview Plugin

Question

Here is my main.dart

class _MyHomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: const WebviewController(),
        ),
      ),
    );
  }

Does anyone who know this answer???

plz.. tell me your solutions...

I used Single child scroll view to scoll up my screens when soft keyboard appears in android..

Also use Adjust Resizing but doesn't work.

IOS device has no problem but only in android device...

ps. If you needed, I'll attach webview_controller.dart too..

Answer 1

I have the same problem as you, have you found a solution to this problem. If not, you can try my temporary solution below.I used Listener to listen position on touch and compare with keyboard height to decide if to scroll up or not

Widget buildInappWebView(double width, double height) {
return Listener(
        onPointerMove: (PointerMoveEvent pointer) {
          if (Platform.isAndroid) {
            swipeDownKeyBoard(pointer);
          }
        },
        child: ListView(
          padding: EdgeInsets.zero,
          physics: const NeverScrollableScrollPhysics(),
          controller: _controllerL,
          shrinkWrap: true,
          children: [
            SizedBox(
              height: getHeightWebview(height),
              child: InAppWebView(
                key: webViewKey,
                gestureRecognizers:
                    Platform.isIOS ? gestureRecognizersOne : null,
                initialUrlRequest:
                    URLRequest(url: Uri.parse("about:blank")),
                initialOptions: options,
                onWebViewCreated: (controller) async {
                },
                androidOnRenderProcessGone: (controller, detail) async {
                },
                onLoadStart: (controller, url) {},
                onLoadStop: (controller, url) async {
                },
                onLoadError: (controller, url, code, message) {
                },
                onProgressChanged: (controller, progress) async {
                },
                onUpdateVisitedHistory: (controller, url, androidIsReload) {
                },
                onConsoleMessage: (controller, consoleMessage) {},
              ),
            ),
          ],
        ));


void swipeDownKeyBoard(PointerMoveEvent pointer) {
Future.delayed(
  const Duration(milliseconds: 550),
  () {
    double insets = MediaQueryData.fromWindow(window).viewInsets.bottom;
    double screenHeight = MediaQueryData.fromWindow(window).size.height;
    double position = pointer.position.dy;
    double keyboardHeight = screenHeight - insets;
    print('inset: $insets');
    // print("keyHeight: $keyboardHeight");
    // print("Position: $position");
    if (position > keyboardHeight && insets > 0) {
      _scrollUp();
    }
  },
);

}

void _scrollUp() {
_controllerL.animateTo(
  //_controllerL.position.maxScrollExtent,
  170,
  duration: const Duration(milliseconds: 100),
  curve: Curves.fastOutSlowIn,
);

}

final ScrollController _controllerL = ScrollController();

Answer 2

I also cant make it scrollable using SingleChildScrollView only but I found a workaround to do that. I kept a flag when keyboard opens and modified my widgets accordingly. Here is the example.

class _MyHomePageState extends State {
bool _keyboardOpen = false;

@override
  void initState() {
    super.initState();
    FocusManager.instance.primaryFocus?.unfocus();
  }


  @override
  Widget build(BuildContext context) {
    _keyboardOpen = MediaQuery.of(context).viewInsets.bottom == 0;
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Visibility(
          visible: _keyboardOpen,
          child: const SizedBox(
            height: 10,
          ),
        ),
        ),
      ),
    );
  }

Here you can make non-visible sizedBox when keyboard opens, you can also decrease the text's size when keyboard appears like this.

Text('your text', textAlign: TextAlign.center, 
    style: TextStyle(fontSize: (_keyboardOpen)? 22 : 9, fontWeight: 
           FontWeight.w500)
    ),

Let me know if this helps.