Flutter| While keyboard pops up there will be BottomOverFlowed. Need exact design as shown in image

Question

When keyboard pops up, there will be bottom over flowed. I need to add a expanded card as background for login form and submit button. And also need that expanded card to move up when there is keyboard.

I have checked through many other solution for keyboard popup, but I couldn't get exact solution for mine design.

    return new Scaffold(
    body: new Column(children: <Widget>[
      SizedBox(
        height: 70,
      ),
      new Image.asset(
        'assets/logo.png',
        fit: BoxFit.cover,
      ),
      new Text(
        "Login",
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
      new Text(
        "It has noon , but also the Type roman, remaining essentially unchanged for the wish i could do.",
        textAlign: TextAlign.center,
      ),
      Column(
        children: <Widget>[
          Expanded(
              child: Container(
            child: Container(
              padding: EdgeInsets.all(24),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(25.0),
                      topRight: const Radius.circular(25.0))),
              child: new ListView(
                children: <Widget>[
                  TextField(
                    style: new TextStyle(
                      color: Color(0xff651515),
                    ),
                    autofocus: false,
                    obscureText: false,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: "email",
                      hintText: "email",
                      labelStyle: TextStyle(
                        color: Color(0xffa4a4a4),
                        fontSize: 14,
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                        borderSide: BorderSide(
                            width: 2,
                            color: Color(0xff55c882),
                            style: BorderStyle.solid),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                        borderSide: BorderSide(
                          width: 1,
                          color: Color(0xffa4a4a4),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  TextField(
                    style: new TextStyle(
                      color: Color(0xff651515),
                    ),
                    autofocus: false,
                    obscureText: false,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: "password",
                      hintText: "password",
                      labelStyle: TextStyle(
                        color: Color(0xffa4a4a4),
                        fontSize: 14,
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                        borderSide: BorderSide(
                            width: 2,
                            color: Color(0xff55c882),
                            style: BorderStyle.solid),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                        borderSide: BorderSide(
                          width: 1,
                          color: Color(0xffa4a4a4),
                        ),
                      ),
                    ),
                ), 
                ],
              ),
            ),
          ))
        ],
      )
    ]));

Answer 1

you can just wrap your column with a:

SingleChildScrollView( 
   child: put your column here
)

hope it helped