Probleme Overflow with flutter

Question

Sorry for my english, I'm a french people.

I create a page for the inscription of my users but the problem is when the phone is to little. I have the problem of Overflow; I want a Scroll Page but with the Widget SingleChildScrollView, I have a problem of height of my widget and isn't work.

  return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.blue[900],
              Colors.blue[800],
              Colors.blue[400],
            ],
            begin: Alignment.topCenter
          )
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 80,),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                FadeAnimation(1.3, Text(
                  "New user",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                  ),
                ),
                ),
                FadeAnimation(1, Text(
                  "Welcome to OCiné",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                  ),
                ))
                ],
              )
            ),
            SizedBox(height: 15,),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(60), topRight: Radius.circular(60))
                ),
                child: Padding(
                  padding: EdgeInsets.all(30),
                  child: Column(
                    children: <Widget>[
                      SizedBox(height: 20,),
                      FadeAnimation(1.4, Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [BoxShadow(
                            color: Color.fromRGBO(33, 150, 243, .3),
                            blurRadius: 20,
                            offset: Offset(0, 10),
                          )],
                        ),
                        child: Column(
                          children: <Widget>[
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                //controller: _emailController,
                                decoration: InputDecoration(
                                  hintText: "Enter firstname",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                //controller: _emailController,
                                decoration: InputDecoration(
                                  hintText: "Enter lastname",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                //controller: _emailController,
                                decoration: InputDecoration(
                                  hintText: "Enter email",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                obscureText: true,
                                //controller: _passwordController,
                                decoration: InputDecoration(
                                  hintText: "Enter password",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                maxLength: 20,
                                //controller: _passwordController,
                                decoration: InputDecoration(
                                  hintText: "Enter username",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                          ],
                        ),
                      )),
                      SizedBox(height: 20,),
                      FadeAnimation(1.5, InkWell(
                        onTap: (){
                          Navigator.push(context, MaterialPageRoute(
                            builder: (context){
                              return LoginPage();
                            }
                          ));
                        },
                        child: Text("Already an account ?", style: TextStyle(color: Colors.grey)),
                      )),
                      SizedBox(height: 20,),
                      FadeAnimation(1.6, InkWell(
                        onTap: () async{
                          //AuthProvider().createUser();
                        },
                        child: Container(
                        height: 50,
                        margin: EdgeInsets.symmetric(horizontal: 50),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: Colors.blue[900],
                        ),
                        child: Center(
                          child: Text("Create User", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
                        ),
                      ),
                      )),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

If you have any solution. I take it, thanks

Answer 1

You have 3 columns right here, you can't wrap the very first one as it would cause height issues because your SingleChildScrollView which has a size of infinity has a children (the column) which also has a size of infinity. What you can do however is to wrap your 3rd (deepest) column, the one that contains your textfields, with a SingleChildScrollView and that should make the content on the container scrollable.

When you need to wrap a column with a SingleChildScrollView and it causes a height error you can wrap the Column that's causing the infinity height with an IntrinsicHeight widget

Answer 2

You cant use Expanded inside SingleChildScrollView so you need to remove Expanded than wrap in SingleChildScrollView if you would like some spacing around the widget that had the Expanded widget you can use a Padding widget. You can use SingleChildScrollView with your columns as long as your columns aren't trying to take infinite space as the column will shrinkwrap itself. Expanded is the problem.