Дно флаттера переполнено на n пикселей столбцом с выравниванием по концу

Question

Я пытаюсь отобразить простой экран регистрации во Flutter, но у меня появляется ошибка bottom overflowed by n pixels при отображении клавиатуры.

My Flutter Widget:

class SignUpScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(16),
            child: SafeArea(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Text(S
                          .of(context)
                          .signUpTitle,
                          style: AppTextTheme.kBigTitle),
                      Container(height: 16),
                      Text(
                          "Some text describing what happens when we do stuff with things and other stuff that probably won't fit in this layout and will give us the horrible error banner ath the bottom of the screen. There's scope for even more text depending on how I'm feeling this evening. It could be that I stop typing, it could be that I type more and more. It really depends on what ",
                          style: AppTextTheme.kParagraph),
                      Container(height: 24),
                      Text("Email address"),
                      TextField(
                          decoration: InputDecoration(
                              hintText: "Email address")),
                      Container(height: 8),
                      Text("Password"),
                      TextField(
                          decoration: InputDecoration(hintText: "Password")),
                      Container(height: 24),
                      MaterialButton(
                        onPressed: () {
                          // Do stuff
                        },
                        child: Text("Sign up"),
                      ),
                      Container(height: 32),
                      FlatButton(
                        child: Column(
                          children: [
                            Text(
                              "Some other text",
                              style: AppTextTheme.kParagraphBold,
                            ),
                            Text("Sign in instead",
                                style: AppTextTheme.kParagraphBold.copyWith(
                                    decoration: TextDecoration.underline)),
                          ],
                        ),
                        onPressed: () {
                          Navigator.pushReplacementNamed(
                              context, RoutePaths.SIGN_IN);
                        },
                      )
                    ]))));
  }
}

Я рассмотрел различные решения, но каждое из них имеет нежелательный компромисс, который либо нарушает дизайн, либо создает нежелательный пользовательский опыт. :

• Перенос Column в SingleChildScrollView означает, что Textfield s скрыты при появлении клавиатуры.
• Настройка resizeToAvoidBottomInset: false на Scaffold также оставляет TextField s скрытым за клавиатурой.
• Замена Column на ListView означает, что я не могу установить mainAxisAlignment на MainAxisAlignment.end, чтобы получить нужный мне вид на скриншоте, где содержание выравнивается снизу.

Вопрос:

Как мне добиться нужного интерфейса с содержимым, выровненным по нижней части экрана, и при этом иметь возможность видеть TextField с, когда пользователь печатает без ошибки переполнения пикселя?

Answer 1

Я только что решил, обернув виджет столбца с Container и SingleChildScrollview, чтобы получить ваш интерфейс. Я надеюсь, что это поможет вам.

class SignUpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: SafeArea(
          child: Container(
            alignment: Alignment.bottomCenter,
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Text(
                    'Sign Up',
                    // style: AppTextTheme.kBigTitle),
                    style: Theme.of(context).textTheme.headline,
                  ),
                  Container(height: 16),
                  Text(
                    "Some text describing what happens when we do stuff with things and other stuff that probably won't fit in this layout and will give us the horrible error banner ath the bottom of the screen. There's scope for even more text depending on how I'm feeling this evening. It could be that I stop typing, it could be that I type more and more. It really depends on what ",
                    // style: AppTextTheme.kParagraph),
                    style: Theme.of(context).textTheme.body1,
                  ),
                  Container(height: 24),
                  Text("Email address"),
                  TextField(
                    decoration: InputDecoration(hintText: "Email address"),
                  ),
                  Container(height: 8),
                  Text("Password"),
                  TextField(
                    decoration: InputDecoration(hintText: "Password"),
                  ),
                  Container(height: 24),
                  MaterialButton(
                    onPressed: () {
                      // Do stuff
                  },
                    child: Text("Sign up"),
                  ),
                  Container(height: 32),
                  FlatButton(
                    child: Column(
                      children: [
                        Text(
                          "Already have an account ?",
                          // style: AppTextTheme.kParagraphBold,
                          style: Theme.of(context).textTheme.subtitle,
                        ),
                        Text("Sign in",
                          // style: AppTextTheme.kParagraphBold
                          style: Theme.of(context)
                            .textTheme
                            .subtitle
                            .copyWith(
                                decoration:   TextDecoration.underline)),
                      ],
                    ),
                    onPressed: () {
                      // Navigator.pushReplacementNamed(
                      //     context, RoutePaths.SIGN_IN);
                    },
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}