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

【问题标题】：Flutter - A RenderFlex overflowed by 190 pixels on the bottom in showModalBottomSheetFlutter - A RenderFlex 在 showModalBottomSheet 底部溢出 190 像素
【发布时间】：2021-05-23 02:24:46
【问题描述】：

我的 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 像素。

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

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

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

我已经这样做了

        isScrollControlled: true,

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

【问题讨论】：

标签： flutter dart provider

【解决方案1】：

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

【讨论】：

工作，但我的底页进入我想在键盘之后的屏幕顶部
将高度赋予底部工作表高度：MediaQuery.of(context).size.height/2

【解决方案2】：

将容器包裹在SingleChildScrollView:

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

【讨论】：