Flutter - showModalBottomSheet 底部的 RenderFlex 溢出 190 像素

Question

我的 showModalBottomSheet 显示底部溢出错误：\n我的 BottomSheet 代码：

\n

 loginSheet(BuildContext context) {\n    return showModalBottomSheet(\n        isScrollControlled: true,\n        context: context,\n        builder: (context) {\n          return Padding(\n            padding: EdgeInsets.only(\n              bottom: MediaQuery.of(context).viewInsets.bottom,\n            ),\n            child: Container(\n              height: MediaQuery.of(context).size.height * 0.30,\n              width: MediaQuery.of(context).size.width,\n              child: Column(\n                children: [\n                  Padding(\n                    padding: EdgeInsets.symmetric(horizontal: 150.0),\n                    child: Divider(\n                      thickness: 4.0,\n                      color: constantColors.whiteColor,\n                    ),\n                  ),\n                  Padding(\n                    padding: EdgeInsets.symmetric(horizontal: 10.0),\n                    child: TextField(\n                      controller: userEmailController,\n                      decoration: InputDecoration(\n                        hintText: \'Enter Email...\',\n                        hintStyle: TextStyle(\n                          color: constantColors.whiteColor,\n                          fontWeight: FontWeight.bold,\n                          fontSize: 16.0,\n                        ),\n                      ),\n                      style: TextStyle(\n                        color: constantColors.whiteColor,\n                        fontWeight: FontWeight.bold,\n                        fontSize: 18.0,\n                      ),\n                    ),\n                  ),\n                  Padding(\n                    padding: EdgeInsets.symmetric(horizontal: 10.0),\n                    child: TextField(\n                      controller: userPasswordController,\n                      decoration: InputDecoration(\n                        hintText: \'Enter Password...\',\n                        hintStyle: TextStyle(\n                          color: constantColors.whiteColor,\n                          fontWeight: FontWeight.bold,\n                          fontSize: 16.0,\n                        ),\n                      ),\n                      style: TextStyle(\n                        color: constantColors.whiteColor,\n                        fontWeight: FontWeight.bold,\n                        fontSize: 18.0,\n                      ),\n                    ),\n                  ),\n                  FloatingActionButton(\n                    backgroundColor: constantColors.blueColor,\n                    child: Icon(\n                      FontAwesomeIcons.check,\n                      color: constantColors.whiteColor,\n                    ),\n                    onPressed: () {\n                      if (userEmailController.text.isNotEmpty) {\n                        Provider.of<Authentication>(context, listen: false)\n                            .logIntoAccount(userEmailController.text,\n                                userPasswordController.text)\n                            .whenComplete(() => Navigator.pushReplacement(\n                                context,\n                                PageTransition(\n                                    child: Homepage(),\n                                    type: PageTransitionType.bottomToTop)));\n                      } else {\n                        warningText(context, \'Fill All the Data\');\n                      }\n                    },\n                  )\n                ],\n              ),\n              decoration: BoxDecoration(\n                  color: constantColors.blueGreyColor,\n                  borderRadius: BorderRadius.only(\n                    topLeft: Radius.circular(12.0),\n                    topRight: Radius.circular(12.0),\n                  )),\n            ),\n          );\n        });\n  }\n\n

\n

检查小部件:\n

\n

错误：

\n

\n

RenderFlex 底部溢出了 190 像素。

\n

\n

导致错误的相关小部件为\nColumn\nlib\\\xe2\x80\xa6\\landingPage\\landingHelpers.dart:188\n您可以使用 VS Code 通知中的“检查小部件”按钮检查此小部件。 \n溢出的 RenderFlex 的方向为 Axis.vertical。\n溢出的 RenderFlex 的边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大造成的。

\n

考虑应用弹性因子（例如使用 Expanded widget）来强制 RenderFlex 的子级适应可用空间，而不是调整其自然大小。\n这被视为错误情况，因为它表明存在无法容纳的内容。可见。如果内容确实大于可用空间，请考虑在将其放入 Flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。

\n

有问题的具体 RenderFlex 是：RenderFlex#6aa4c OVERFLOWING

\n

我已经这样做了

\n

        isScrollControlled: true,\n

\n

&

\n

padding: EdgeInsets.only(\n              bottom: MediaQuery.of(context).viewInsets.bottom,\n            ),\n

\n

Answer 1

将容器包裹在SingleChildScrollView：

child: Container(
              height: MediaQuery.of(context).size.height * 0.30,
              width: MediaQuery.of(context).size.width,
              child: SingleChildScrollView(child: Column(