I'm developing a Flutter web application and testing it on my phone. When I open the keyboard, some parts of the background appear above the keyboard, instead of keeping the screen widgets in place. This causes unexpected UI behavior.

As mentioned earlier, the keyboard should push up the relevant input fields while keeping the rest of the UI intact. No background elements should appear above the keyboard. However, the current issue is that when the keyboard opens, some background parts overlap with it instead of the input field adjusting properly.

You can try the issue in the following link: Demo link

The following video demonstrates the issue, showing how the background overlaps with the keyboard instead of the input field adjusting properly. UI Issue with Keyboard Overlap

what I tried:

1. Setting resizeToAvoidBottomInset to true/false in Scaffold:

return Scaffold(
  resizeToAvoidBottomInset: false, // Also tried true
  body: MyWidget(),
);

2. Wrapping the main widget with a SingleChildScrollView or Listview:

return Scaffold(
  body: SingleChildScrollView( // Also tried Listview
    child: Column(
      children: [
        TextField(), // Example input field
        // Other widgets...
      ],
    ),
  ),
);

3. Wrapping the main widget with KeyboardVisibilityBuilder instead of SingleChildScrellView

None of these solutions completely fixed the issue. I need a way to ensure that:

• The keyboard pushes up only the relevant input fields.
• The UI remains intact while allowing scrolling when the keyboard is open.

How can I achieve this behavior correctly in Flutter Web? Any suggestions would be greatly appreciated!