How to move textfields above a button which moves up with keyboard in flutter

Question

I have a button aligned to the bottom of the screen so that whenever keyboard opens, the button will hold position above the keyboard. This button hides textfields which is wrapped in a column inside singlechildscrollview.

(TextFields move upwards with keyboard. Botton stacked above the column is causing the issue)

Image before opening keyboard

Image after opening keyboard

I tried wrap column in a Padding widget and gave a bottom padding but still the same result. Please suggest a way to position textfields above the button.

Note: First time poster. Please forgive if there is any mistakes. Thank You

return SafeArea(
  child: Stack(
    fit: StackFit.expand,
    children: [
      SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              Container(
                color: Colors.deepOrange,
                width: double.maxFinite,
                height: height * 0.3,
              ),
              Container(
                color: Colors.black,
                width: double.maxFinite,
                height: height * 0.56,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller)
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: FlatButton(
          color: Colors.blue[900],
          onPressed: () {},
          child: Text(
            "Save",
            style: TextStyles().subTextStyleWhite,
          ),
          minWidth: double.maxFinite,
          height: height * 0.1,
        ),
      )
    ],
  ),
);

Edit: scrollPadding property of TextField widget solved the issue. Thanks @Anitesh Reddy.

Answer 1

Keep padding/margin or sizedBox( height:height*0.12 ) at the bottom of the column so that the widget in positioned will move down and leave space.

use scrollpadding property