SingleChildScrollView won't work? How to adjust layout when soft keyboard appears in flutter?

Question

I'm a beginner in a flutter. The keyboard appears but the layout doesn't resize to keep it in view. I also checked with SingleChildScrollView but won't work. How to adjust layout when soft keyboard appears in flutter?

Here is my class :

 return new Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: MyColors.gray_dark,
      appBar:
          PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
      body: Stack(
        children: <Widget>[
          Container(
            child: Image.asset(
                'assets/images/air_force_golden_jubilee_campus.jpeg',
                fit: BoxFit.cover),
            width: double.infinity,
            height: double.infinity,
          ),
          Container(color: MyColors.primaryDark.withOpacity(0.9)),
          SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
              width: double.infinity,
              height: double.infinity,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(height: 30),
                  Text("Welcome!",
                      style: MyText.display2(context).copyWith(
                          color: Colors.white, fontFamily: MyFonts.openSansBold)),
                  Container(height: 5),
                  Text(schoolDetails.schoolName,
                      style: MyText.title(context).copyWith(
                          color: Colors.white,
                          fontWeight: FontWeight.w300,
                          fontFamily: MyFonts.openSansRegular)),
                  Container(height: 10),
                  Container(
                    width: 120,
                    height: 120,
                    child: Image.asset(
                        'assets/images/schools/air_force_bal_bharati_logo.png'),
                  ),
                  Container(height: 10),
                  Container(height: 3, width: 40, color: Colors.white),
                  Container(height: 5),
                  Text("Log in",
                      style: MyText.medium(context).copyWith(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontFamily: MyFonts.openSansBold)),
                  SizedBox(),
                  TextField(
                    controller: nameController,
                    style: TextStyle(color: Colors.white),
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      labelText: "USERNAME",
                      labelStyle: TextStyle(
                          color: Colors.white,
                          fontFamily: MyFonts.openSansRegular),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 2),
                      ),
                    ),
                  ),
                  Container(height: 25),
                  TextField(
                    style: TextStyle(color: Colors.white),
                    controller: passwordController,
                    keyboardType: TextInputType.text,
                    obscureText: _obscureText,
                    decoration: InputDecoration(
                        labelText: "PASSWORD",
                        labelStyle: TextStyle(
                            color: Colors.white,
                            fontFamily: MyFonts.openSansRegular),
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white, width: 1),
                        ),
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white, width: 2),
                        ),
                        suffixIcon: GestureDetector(
                          onTap: () {
                            setState(() {
                              _obscureText = !_obscureText;
                            });
                          },
                          child: Icon(
                              _obscureText
                                  ? Icons.visibility
                                  : Icons.visibility_off,
                              color: Colors.white),
                        )),
                  ),
                  Container(height: 20),
                  FloatingActionButton(
                    heroTag: "fab",
                    elevation: 0,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
                    onPressed: () {
                      /* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
                        return DashboardRoute(schoolDetails);
                        //return  NoticeType();
                      }));*/
                      // LoginData data = new LoginData.section("sahood@traxsmart.in", "abc@123ABC");
                      progressDialog.show();
                      LoginData data = new LoginData.section(
                          nameController.text, passwordController.text);
                      _signIn(data);
                    },
                  ),
                  SizedBox(),
                  Container(
                    width: double.infinity,
                    child: FlatButton(
                      child: Text("forgot password?",
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: MyFonts.openSansRegular)),
                      color: Colors.transparent,
                      onPressed: () {
                        /*  LoginData data = new LoginData.section("+919061855558", "abc@123ABC");
                        _registerUser(data);*/
                        // confirm();
                        Navigator.push(context,
                            MaterialPageRoute(builder: (BuildContext context) {
                          return ForgotPassword();
                          // return  NoticeType();
                        }));
                      },
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );

bottom overflowed when keyboard shows error removing resizeToAvoidBottomInset: false.

Answer 1

The problem is You used a SIngleCHildScrollView() inside the stack that's why when the soft keyboard shows up its saying bottom overflow.

Solution:

1. remove the SingleChildScrollView() from inside stack

2. Wrap your Stack() with a Container()

3. And finally wrap your Container( with 'SIngleChildScrollView()'

return new Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: MyColors.gray_dark,
      appBar:
          PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
      body: SingleChildScrollView(
        child: COntainer(
        child: Stack(
        children: <Widget>[
          Container(
            child: Image.asset(
                'assets/images/air_force_golden_jubilee_campus.jpeg',
                fit: BoxFit.cover),
            width: double.infinity,
            height: double.infinity,
          ),
          Container(color: MyColors.primaryDark.withOpacity(0.9)),
          
            Container(
              padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
              width: double.infinity,
              height: double.infinity,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(height: 30),
                  Text("Welcome!",
                      style: MyText.display2(context).copyWith(
                          color: Colors.white, fontFamily: MyFonts.openSansBold)),
                  Container(height: 5),
                  Text(schoolDetails.schoolName,
                      style: MyText.title(context).copyWith(
                          color: Colors.white,
                          fontWeight: FontWeight.w300,
                          fontFamily: MyFonts.openSansRegular)),
                  Container(height: 10),
                  Container(
                    width: 120,
                    height: 120,
                    child: Image.asset(
                        'assets/images/schools/air_force_bal_bharati_logo.png'),
                  ),
                  Container(height: 10),
                  Container(height: 3, width: 40, color: Colors.white),
                  Container(height: 5),
                  Text("Log in",
                      style: MyText.medium(context).copyWith(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontFamily: MyFonts.openSansBold)),
                  SizedBox(),
                  TextField(
                    controller: nameController,
                    style: TextStyle(color: Colors.white),
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      labelText: "USERNAME",
                      labelStyle: TextStyle(
                          color: Colors.white,
                          fontFamily: MyFonts.openSansRegular),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 2),
                      ),
                    ),
                  ),
                  Container(height: 25),
                  TextField(
                    style: TextStyle(color: Colors.white),
                    controller: passwordController,
                    keyboardType: TextInputType.text,
                    obscureText: _obscureText,
                    decoration: InputDecoration(
                        labelText: "PASSWORD",
                        labelStyle: TextStyle(
                            color: Colors.white,
                            fontFamily: MyFonts.openSansRegular),
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white, width: 1),
                        ),
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white, width: 2),
                        ),
                        suffixIcon: GestureDetector(
                          onTap: () {
                            setState(() {
                              _obscureText = !_obscureText;
                            });
                          },
                          child: Icon(
                              _obscureText
                                  ? Icons.visibility
                                  : Icons.visibility_off,
                              color: Colors.white),
                        )),
                  ),
                  Container(height: 20),
                  FloatingActionButton(
                    heroTag: "fab",
                    elevation: 0,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
                    onPressed: () {
                      /* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
                        return DashboardRoute(schoolDetails);
                        //return  NoticeType();
                      }));*/
                      // LoginData data = new LoginData.section("sahood@traxsmart.in", "abc@123ABC");
                      progressDialog.show();
                      LoginData data = new LoginData.section(
                          nameController.text, passwordController.text);
                      _signIn(data);
                    },
                  ),
                  SizedBox(),
                  Container(
                    width: double.infinity,
                    child: FlatButton(
                      child: Text("forgot password?",
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: MyFonts.openSansRegular)),
                      color: Colors.transparent,
                      onPressed: () {
                        /*  LoginData data = new LoginData.section("+919061855558", "abc@123ABC");
                        _registerUser(data);*/
                        // confirm();
                        Navigator.push(context,
                            MaterialPageRoute(builder: (BuildContext context) {
                          return ForgotPassword();
                          // return  NoticeType();
                        }));
                      },
                    ),
                  )
                ],
              ),
            ),
        ],
      ),
      ),),
    );

Answer 2

Wrap your Stack Widget with a Container and use Single Child Scroll View on that Container. Also, assign the height and width of the Container over the Stack to avoid Box Constraints taking infinite size.

return new Scaffold(
  backgroundColor: Colors.grey,
  appBar:
      PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
  body: SingleChildScrollView(
    child: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: <Widget>[
          Container(
            child: Image.network(
                'https://wizardsourcer.com/wp-content/uploads/2019/03/Stackoverflow.png'),
            width: double.infinity,
            height: double.infinity,
          ),
          Container(color: Colors.grey[600]),
          Container(
            padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
            width: double.infinity,
            height: double.infinity,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(height: 30),
                Text("Welcome!"),
                Container(height: 5),
                Text(
                  'School Name',
                ),
                Container(height: 10),
                Container(
                  width: 120,
                  height: 120,
                  child: Image.network(
                      'https://wizardsourcer.com/wp-content/uploads/2019/03/Stackoverflow.png'),
                ),
                Container(height: 10),
                Container(height: 3, width: 40, color: Colors.white),
                Container(height: 5),
                Text(
                  "Log in",
                ),
                SizedBox(),
                TextField(
                  style: TextStyle(color: Colors.white),
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    labelText: "USERNAME",
                    labelStyle: TextStyle(
                      color: Colors.white,
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.white, width: 1),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.white, width: 2),
                    ),
                  ),
                ),
                Container(height: 25),
                TextField(
                  style: TextStyle(color: Colors.white),
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration(
                      labelText: "PASSWORD",
                      labelStyle: TextStyle(
                        color: Colors.white,
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.white, width: 1),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.white, width: 2),
                      ),
                      suffixIcon: GestureDetector(
                        onTap: () {
                          // setState(() {
                          //   _obscureText = !_obscureText;
                          // });
                        },
                        child:
                            Icon(Icons.visibility_off, color: Colors.white),
                      )),
                ),
                Container(height: 20),
                FloatingActionButton(
                  heroTag: "fab",
                  elevation: 0,
                  backgroundColor: Colors.white,
                  child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
                  onPressed: () {
                    /* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
                      return DashboardRoute(schoolDetails);
                      //return  NoticeType();
                    }));*/
                    // LoginData data = new LoginData.section("sahood@traxsmart.in", "abc@123ABC");
                    // progressDialog.show();
                    // LoginData data = new LoginData.section(
                    //     nameController.text, passwordController.text);
                    // _signIn(data);
                  },
                ),
                SizedBox(),
                Container(
                  width: double.infinity,
                  child: FlatButton(
                    child: Text("forgot password?",
                        style: TextStyle(
                          color: Colors.white,
                        )),
                    color: Colors.transparent,
                    onPressed: () {
                      /*  LoginData data = new LoginData.section("+919061855558", "abc@123ABC");
                      _registerUser(data);*/
                      // confirm();
                      // Navigator.push(context,
                      //     MaterialPageRoute(builder: (BuildContext context) {
                      //   return ForgotPassword();
                      //   // return  NoticeType();
                      // }));
                    },
                  ),
                )
              ],
            ),
          )
        ],
      ),
    ),
  ),
);