how to resize or move all the child widgets of stack when one of it's grandchild is input TextField in flutter

Question

I have positioned(using Align) two child widgets within stack widget and one of it contains form TextField to take input. When I clicked to enter data, only it's parent widget is moved up on Keypad entered as in the below picture. Is there any way to move/resize the child widgets of stack while entering data from keypad.

Source code:

return Scaffold(
      body: Stack(
          children: <Widget>[
          Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/playingboard2.jpg'),
                    fit: BoxFit.cover)),
            child: null,
          ),
          _buildSelfPlayer(), // Returns the widget with form input and other widgets
          _buildBank(), // top center, shows two pictures of bank
        ],
      ),
    );

did you try wrapping the Stack in a SingleChildScrollView with vertical scroll direction? — Jigar Patel
Yes, I tried, then all the widgets lost alignment and pileup at top center. — Durga ga

Jigar Patel Jigar Patel · Accepted Answer · 2020-07-11T12:22:38

I don't see another fix for this, while also making use of Stack widget.

So instead I'd suggest you to use Column widget wrapped inside a SingleChildScrollView. I tried it and it works as intended. The other children move up too along with the TextField, so maintaining the distance between them and not overlapping.

For the background image, you can wrap the Scaffold in a Container, use that image in the Column decoration and make the Scaffold's backgroundColor to Colors.transparent.

how to resize or move all the child widgets of stack when one of it's grandchild is input TextField in flutter

1 Answers