Проблема переполнения флаттером

Question

Извините за мой английский sh, я француз.

Я создаю страницу для надписи моих пользователей, но проблема в том, что телефон слишком маленький. У меня проблема переполнения; Я хочу страницу прокрутки, но с Widget SingleChildScrollView у меня проблема с высотой моего виджета, и она не работает.

  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))
                        ),
                      ),
                      )),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Если у вас есть какое-либо решение. Я так понимаю, спасибо

Answer 1

Вы не можете использовать Expanded внутри SingleChildScrollView, поэтому вам нужно удалить Expanded, чем перенос в SingleChildScrollView, если вы хотите, чтобы некоторый интервал вокруг виджета с виджетом Expanded можно использовать Padding виджет. Вы можете использовать SingleChildScrollView со своими столбцами, если ваши столбцы не будут занимать бесконечное пространство, поскольку столбец будет сокращаться. Expanded это проблема.

Answer 2

Здесь у вас есть 3 столбца, вы не можете обернуть самый первый, так как это вызовет проблемы с высотой, потому что у вашего SingleChildScrollView, который имеет размер бесконечности, есть дочерние элементы (столбец), который также имеет размер бесконечности , Однако вы можете заключить в 3-й (самый глубокий) столбец, который содержит ваши текстовые поля, SingleChildScrollView, и это должно сделать прокручиваемым содержимое контейнера.

Когда вам нужно обернуть столбец с SingleChildScrollView, и это вызывает ошибку высоты, вы можете обернуть столбец, который вызывает высоту бесконечности с IntrinsicHeight виджет