Inside the Stack the how to put on a vertical scroll after rendering a keyboard , SingleChildScrollView is not working ,FLutter?

Question

Can you help me to implement the scroll View inside the Stack After the keyboard has rendered for the TextField I have put more textFields inside the column widget,But when the keyboard has been rendered it is covering the text Field so how to put the screen under scrolling after keyboard has rendered As this is stack singleChildScrollView is not funtioning

Widget build(BuildContext context) {
  return SafeArea(
  child:Stack(children: <Widget>[
    Align(
      alignment: Alignment.topCenter,
      child: Container(
        child: Padding(
          padding: EdgeInsets.only(top: 20.0),
          child: Center(
            child: Image.asset(
              "img/xyzlogo.jpg",
              width: Short.w * 0.4,
            ),
          ),
        ),
        width: Short.w,
        height: MediaQuery.of(context).size.height * 0.20,
        color: Colors.blue[800],
      ),
    ),
    Align(
      alignment: Alignment.bottomLeft,
      child: Container(
        height: Short.h * 0.82,
        width: Short.w,
        color: Colors.white,
        child:new LayoutBuilder(
    builder:
        (BuildContext contex, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints:
              BoxConstraints(
                maxHeight: viewportConstraints.maxHeight,
                // minHeight:viewportConstraints.minHeight
                ),
          child: Column(children: [Form(
                  key: _formKey,
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                top: 18,left: Short.w * 0.03,
                              ),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Email/Phone',
                                      hintText: " Enter your email /Phone",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      // border: OutlineInputBorder(
                                      //     borderRadius: BorderRadius.circular(
                                      //         Short.h * 2.5)),
                                    ),
                                    controller: email,
                                    keyboardType:
                                        TextInputType.emailAddress,
                                   ),
                                ),
                              ),
                            ),
                          ),
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: 18,
                                  left: Short.w * 0.03,
                                  right: Short.w * 0.02),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Password',
                                      hintText: " Enter your Password",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                                                             ),
                                    controller: pwd,
                                    keyboardType:
                                        TextInputType.visiblePassword,
                                    // validator: pwdValidator,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ), ]), ), ); },)  ),   ),

Answer 1

After rendering the keyboard, you cannot use the SingleChildScrollView widget inside the stack or column because the SinglechildScrollView is used when you have a single box that is entirely visible unlike the rendering of any other widget on it. This can be solved by using the stack widget inside the SingleChildSrollView widget into the scaffold through which the entire stack could be scrolled.

   Scaffold(
           body: SingleChildScrollView(
             child: Stack(children: <Widget>[
                Align(
            alignment: Alignment.topCenter,
            child: Container(
              child: Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Center(
                  child: Image.asset(
                    "img/xyzlogo.jpg",
                    width: Short.w * 0.4,

                  ),
                ),
              ),
              width: Short.w,
              height: MediaQuery.of(context).size.height * 0.20,
              color: Colors.blue[800],
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              margin: EdgeInsets.only(top: 150),
              height: Short.h * 0.75,
              width: Short.w,
              color: Colors.white,
              child: new Column(children: [

                Form(
                  key: _formKey,
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                top: 18,
                                left: Short.w * 0.03,
                              ),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Email/Phone',
                                      hintText: " Enter your email /Phone",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                    ),
                                    controller: email,
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: 18,
                                  left: Short.w * 0.03,
                                  right: Short.w * 0.02),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Password',
                                      hintText: " Enter your Password",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                    ),
                                    controller: pwd,
                                    keyboardType: TextInputType.visiblePassword,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                    ],
                  ),
                ),

              ]),
            ),
          ),

        ]),
      ),

    ));

After that, inside the container use margin which provides space outside the border that makes your screen look good.