How to stop overlaying in a positioned stack when keyboard is opened

Question

I have this Positioned Stack and when I open the keyboard to enter in the textField it overlays everything and all the widgets move up. How can I stop it and keep them in the same position?

@override
    Widget build(BuildContext context) {
     final double height = MediaQuery.of(context).size.height;
      return Scaffold(
        appBar: AppBar(
          title: const Text('Graphs'),
        ),
        body: SizedBox(
          height :  height,
          child: Stack(
            children: [
               Positioned(
                 bottom: height / 2,
                left: 40,
                child: const Text(
                  'test text',
                  style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.w400,
                      color: Colors.lightBlue),
                ),
              ),
              Positioned(
                bottom: height / 2 - 80,
                child: Column(
                    children : [EquationTextField(onChanged: (input) {
                      setState(() {
                        inEquation = input!;
                      });
                    }, inputScreenContext: context,),
                MaterialButton(
                  onPressed: () {
                    setState(() {
                      toggled = !toggled;
                    });
                  },
                child: const Text('Enter'),)]),
              )
            ],
          ),
        ),
      );
    }
    

I tried wrapping the Stack in a SingleChildScrollView but then it gives problems with Padding and some other stuff. Another way is appreciated.

Answer 1

If you want the page to be fixed when the keyboard is opened, you must use the following code:

resizeToAvoidBottomInset: false

This code is used in the first picture

return Scaffold(
  resizeToAvoidBottomInset: false,//<-- code is here
  appBar: AppBar(
    title: const Text('Graphs'),
  ),