布局期间抛出以下断言：底部 X 像素溢出的 RenderFlex

Question

您好，我是 flutter 新手，我正在尝试构建一个简单的登录/注册屏幕，但每次弹出键盘时，它都会在相关小部件列上出现此渲染错误，已经更改了 resizeToAvoidBottomInset为 false 但我希望框架滚动，为此我尝试用 ListView 或 SingleChildScrollView 包装每个小部件，但似乎没有任何东西可以修复它或直接给我一些其他错误，我没有看到什么？

感谢您的帮助！

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.symmetric(
            horizontal: 32,
          ),
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Flexible(child: Container(), flex: 2),
              //----------------------------------------------------------------
              //---------------------------logo image---------------------------
              //----------------------------------------------------------------
              SvgPicture.asset(
                'assets/logo.svg',
                color: Colors.red[800],
                height: 100,
              ),
              //spacing box
              const SizedBox(height: 55),
              //----------------------------------------------------------------
              //------------------------text for email--------------------------
              //----------------------------------------------------------------
              textFieldIn(
                textEditingController: _emailController,
                hintText: 'Enter your Email',
                textInputType: TextInputType.emailAddress,
              ),
              //spacing box
              const SizedBox(height: 21),
              //----------------------------------------------------------------
              //-----------------------text for password------------------------
              //----------------------------------------------------------------
              textFieldIn(
                textEditingController: _passwordController,
                hintText: 'Enter your Password',
                textInputType: TextInputType.text,
                isPass: true,
              ),
              //spacing box
              const SizedBox(height: 13),
              //----------------------------------------------------------------
              //-----------------------------button-----------------------------
              //----------------------------------------------------------------
              InkWell(
                onTap: () async {
                  setState(() {
                    _isLoading = true;
                  });
                  String result = await authentication().logInUser(
                    email: _emailController.text,
                    password: _passwordController.text,
                  );
                  print(result);
                  if (result != 'Success') {
                    showSnackBar(result, context);
                  } else if (result == 'Success') {
                    Navigator.of(context).pushReplacement(
                      MaterialPageRoute(
                        builder: (context) => const responsiveScreen(
                          mobileLayout: mobileScreen(),
                          webLayout: webScreen(),
                        ),
                      ),
                    );
                  }
                },
                child: Container(
                  child: const Text('Log In'),
                  width: double.infinity,
                  alignment: Alignment.center,
                  padding: const EdgeInsets.symmetric(vertical: 13),
                  decoration: const ShapeDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(4),
                      ),
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              //spacing box
              const SizedBox(height: 8),
              Flexible(
                child: Container(),
                flex: 2,
              ),
              //----------------------------------------------------------------
              //---------------------------signing up---------------------------
              //----------------------------------------------------------------
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    child: const Text("Don't have an account? "),
                    padding: const EdgeInsets.symmetric(
                      vertical: 8,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => const signUpScreen(),
                        ),
                      );
                    },
                    child: Container(
                      child: const Text(
                        "Sign Up",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      padding: const EdgeInsets.symmetric(
                        vertical: 8,
                      ),
                    ),
                  ),
                ],
              ),
              //spacing box
              const SizedBox(height: 34),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

首先，建议将 Scaffold 包裹在 SafeArea 内，而不是其他方式。现在关于您的问题，将第一个 Container 包装在三个或您的 Column 中，这样

SizedBox(
   height: MediaQuery.of(context).size.height,
   child: SingleChildScrollView (
      child: ...
   )
);

应该可以解决问题。