5

I'm testing on Android (I'll verify it's the same on iOS also).

My issue is that when I have a webview showing a stripe checkout page, and I tap a text entry there to enter something near the bottom (zipcode) then the virtual keyboard covers the webview and I'm NOT able to scroll up even in the webview.

It appears that the webview takes up the whole screen as expected, but when a soft keyboard comes up Flutter I think usually makes space for it (shrinks widgets showing on the screen). Webview appears to just stay the same size.

I tried a hack of putting the web view in a container() with dynamic height myself. It sorta works. The code is below, and the key line is this height of the Container():

height: MediaQuery.of(context).size.height * (MediaQuery.of(context).viewInsets.bottom != 0 ? .7 : 1)

But this has issues with confusing the keyboard. It somehow tricks the keyboard to NOT be digit entry type for zip code for example. It looks like it tries, but repaints to non digit keyboard after a split second.

Why does Webview not respect the soft keyboard on phones?

Here is my build in the stateful widget:

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        children: [
          initialUrl == null
              ? Container()
              : Container(
                  height: MediaQuery.of(context).size.height * (MediaQuery.of(context).viewInsets.bottom != 0 ? .7 : 1),
                  child: WebView(
                    initialUrl: initialUrl,
                    javascriptMode: JavascriptMode.unrestricted,
                    onPageStarted: (controller) {},
                    onPageFinished: (controller) {
                      Future.delayed(Duration(milliseconds: 1234), () {
                        if (mounted) {
                          showLoading = false;
                          setState(() {});
                        }
                      });
                    },
                    navigationDelegate: (NavigationRequest request) {
                      if (request.url.startsWith('https://example.com/success')) {
                        Navigator.of(context).pop('success');
                      } else if (request.url.startsWith('https://example.com/cancel')) {
                        Navigator.of(context).pop('cancel');
                      }
                      return NavigationDecision.navigate;
                    },
                  ),
                ),
          showLoading == true
              ? Center(
                  child: Container(width: 80, height: 80, child: CircularProgressIndicator()),
                )
              : Container(),
        ],
      ),
    );
  }

Here are screen shots. Note in the keyboard one you can NOT even scroll the webview to see the zip you're typing...

enter image description here enter image description here

4 Answers 4

9

The answer for me was two things.

First to use this line which sets WebView.platform inside the stateful widget showing the webview. Notice that it's specific to my testing at the time on Android, so perhaps for some of you when you didn't see the issue, you maybe were on iOS?

  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView(); // <<== THIS
  }

Second I added a Scaffold with resizeToAvoidBottomInset set to true and removed my use of this:

height: MediaQuery.of(context).size.height * (MediaQuery.of(context).viewInsets.bottom != 0 ? .7 : 1),`

Here is the code for the body with the webview

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        children: [
          initialUrl == null
              ? Container()
              : Scaffold(
                resizeToAvoidBottomInset: true,
                body: WebView(
                  initialUrl: initialUrl,
                  javascriptMode: JavascriptMode.unrestricted,
                  onPageStarted: (controller) {},
                  onPageFinished: (controller) {
                    Future.delayed(Duration(milliseconds: 1234), () {
                      if (mounted) {
                        showLoading = false;
                        setState(() {});
                      }
                    });
                  },
                  navigationDelegate: (NavigationRequest request) {
                    if (request.url.startsWith('https://example.com/success')) {
                      Navigator.of(context).pop('success');
                    } else if (request.url.startsWith('https://example.com/cancel')) {
                      Navigator.of(context).pop('cancel');
                    }
                    return NavigationDecision.navigate;
                  },
                ),
              ),
          showLoading == true
              ? Center(
                  child: Container(width: 80, height: 80, child: CircularProgressIndicator()),
                )
              : Container(),
        ],
      ),
    );
  }
1

Here a simpler approach by using the 'gestureRecognizers' property to move the scroll gesture to the Webview itself:

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Webview Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Webview Example'),
        ),
        body: Stack(
          children: [
            //... widgets that render behind the column
            WebView(
              initialUrl: 'https://inputtypes.com',
              javascriptMode: JavascriptMode.unrestricted,
              gestureRecognizers: Set()
                ..add(
                  Factory<DragGestureRecognizer>(
                    () => VerticalDragGestureRecognizer(),
                  ),
                ),
            ),
          ],
        ),
      ),
    );
  }
}

Try it out and see if it solves your issue

0

Have you tried wrapping your widget with a SingleChildScrollView?

4
  • Yes, I tried that. It causes a render issue since the webview was infinitely (un) constrained. I guess I could try putting it into a container the size of the screen, and then in a SingeChildScrollView. Apr 27, 2021 at 16:24
  • perhaps you could also use a column instead of a container with a specific height. Apr 27, 2021 at 16:29
  • Unfortunately, it doesn't help. And also there is an overflow by 31 pixels which my guess is caused by the SafeArea(). Apr 27, 2021 at 17:28
  • it worked for me, I posted the code as an answer for better code formatting ;) Apr 27, 2021 at 18:37
0

This worked for me:

Scaffold(
      body: Stack(
        children: [
          //... widgets that render behind the column
          Align(
            alignment: Alignment.center,
            child: SingleChildScrollView( 
              child: Column(
                 children: [
                    //... login form inputs and buttons
                 ]
              ),
            ),
          ),
        ],
      ),
    );
1
  • 1
    You tried this with a Webview? What website did you point it to? Can you show a image of the web with the keyboard showing and not showing so I can see it working? Apr 27, 2021 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.