Flutter - A RenderFlex 在 showModalBottomSheet 底部溢出 190 像素

Question

我的 showModalBottomSheet 显示底部溢出错误：我的 bottomSheet 代码：

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

检查小部件：

错误：

一个 RenderFlex 在底部溢出了 190 个像素。

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

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

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

我已经这样做了

        isScrollControlled: true,

&

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

Answer 1

使用 SingleChildScrollView。 用 SingleChildScrollView 包裹你的填充

Answer 2

将容器包装在SingleChildScrollView中：

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