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

Question

嗨，我是 flutter 的新手，我正在尝试构建一个简单的符号 in/sign 向上屏幕，但每次弹出键盘时，它都会在相关的小部件列上不断出现此渲染错误，已经更改 in/sign =11=] 到 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: ...
   )
);

应该可以解决问题。

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

The following assertion was thrown during layout: A RenderFlex overflowed by X pixels on the bottom

listview

widget

dart

flutter

singlechildscrollview