u/HolidayValuable5870

Looking for some help troubleshooting an issue with a Flutter web app on Android.

I have a scrollable dialog that holds a payment form. The form inputs are rendered inside HTML platform views because they are provided via a network request by a third party.

On Android Chrome and Edge, when the user taps in to one of the inputs and the soft keyboard appears, the browser pushes the bottom of the app above the keyboard, revealing the keyboard padding.

I think the browser is trying to scroll the input into the middle of the viewport, without taking into consideration the size of the visualViewport.

How can I work around this so the keyboard padding remains hidden behind the keyboard?

I’ve got a flutter web app, and I simply can’t figure out how to get the layout to accommodate the on-screen keyboard.

Specifically, I have a form in an alertdialog. When the user brings up the keyboard, it covers portions of the form, including the submit button.

This is an issue on Android specifically, where the keyboard overlays the app. iOS devices seem to slide the app up with the keyboard.

I’ve read about viewInsets.padding, but they always seem to be 0 in the context of the web. Then again, I’ve seen this work in other codebases (outside the context of a dialog).

Any help would be greatly appreciated!

I have a Flutter web app running 3.41.1. When I attempt to render HTML (either via the platform view registry or HTMLElementView), the build doesn’t render the HTML to the screen in browsers on iOS specifically. I’ve inspected the DOM on an iOS device and I can see the platform view in the markup, but the only way I can see it in the UI is by setting display:none on the shadow DOM canvas that sits above the platform views.

I’ve also had trouble finding similar reports, which leads me to believe that maybe I’m missing something.

Has anyone else experienced this?

Hi all,

I’m looking for advice from anyone with experience with rendering iFrame content on a Flutter web app.

My app implements a 3rd-party payment processor, whose credit card form we iFrame into my app. My current implementation works well in a desktop web browser as well as on iPhone browsers.

However, on some Android devices*, when the user taps into a form field and their keyboard pops up, the app decides it needs a re-render, which results in the payment form being cleared and requested again, which in turn hides the keyboard. This creates a circular issue that basically renders the form unusable on certain android devices.

Any ideas?

*seems to work find in chrome on a Galaxy S21a, but fails on a Google Pixel 6a and Galaxy S25