Flutter

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),
                  )),
            ),
          );
        });
  }

检查小部件：

错误：

A RenderFlex overflowed by 190 pixels on the bottom.

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

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

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

我已经这样做了

        isScrollControlled: true,

&

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

Answer 1

将容器包裹在SingleChildScrollView:

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

Answer 2

使用 SingleChildScrollView。用 SingleChildScrollView

包装你的填充

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

Flutter - A RenderFlex overflowed by 190 pixels on the bottom in showModalBottomSheet

provider

dart