Flutter bug with nested scrollviews - flutter

Question

In my Flutter App, I have a Screen with a PageView that shows Cards. Some of the Cards have TextFields, so I put the Screen into a SingleChildScrollView, so that the Keyboard pushes the screen to the top and does not overlap. Here is an example of the code:
class DummyScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: PageView(
physics: NeverScrollableScrollPhysics(),
children: [
DummyCard(),
],
),
),
);
}
}
Now, some of the cards have a lot of TextFields and on smaller screens it would be too large. So I also put them into a ScrollView. This means I have a widget that contains a ScrollView, inside a PageView, inside a ScrollView:
(This is not the exact code, the styling parts are missing, obviously)
class DummyCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 14, vertical: 14),
child: Scrollbar(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
decoration: InputDecoration(hintText: "TextField 1"),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(hintText: "TextField 2"),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(hintText: "TextField 3"),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(hintText: "TextField 4"),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(hintText: "TextField 5"),
),
],
),
),
),
),
);
}
}
The PageView should not be scrollable, but should change the page on a button tap. So that is no problem. When The Keyboard is not opened, it is not a problem either, because the outer ScrollView is not scrollable, when the keyboard is not opened. The Problem occurs when I tap on a TextField and the Keyboard pops up. Now I have a scrollable ScrollView on the outside (the whole screen), and a scrollable ScrollView inside the Card, which leads to the following two problems:
The scrolling behavior is not good in general. When I tap the screen inside the Card, I can only scroll the inner ScrollView, even if I have already scrolled "to the end". So when I want to scroll the outer ScrollView, I have to tap the screen outside of the Card, which is not a very nice user experience.
When I tap a TextField, I want the screen to be pushed to the top. But as the TextFields are inside the inner ScrollView, it only pushes the inner ScrollView to the top, which often leads to the keyboard still overlapping the TextField.
I know that it is not a good practice to have 2 ScrollViews with the same scroll direction nested in each other. But it is the only solution that came to my mind. I definitely need the ScrollView inside the card. And I also want to push the screen to the top when the keyboard pops up, I don't want to shrink the screen (not possible with my layout). So, any ideas on how I can fix the above 2 problems?

Answer 1

Scaffold has a property which will prevent resizing the page on keyboard open, which is true by default. Try to set it to false
bool? resizeToAvoidBottomInset