错误：A RenderFlex 底部溢出 99524 像素

Question

这是错误：

在构建 CustomBtn(dirty) 时抛出了以下断言： 在构建期间调用 setState() 或 markNeedsBuild()。

这个 Overlay 小部件不能被标记为需要构建，因为框架已经在构建小部件的过程中。仅当其祖先之一当前正在构建时，小部件才能在构建阶段标记为需要构建。这个例外是允许的，因为框架在子组件之前构建父小部件，这意味着将始终构建脏后代。否则，框架可能不会在此构建阶段访问此小部件。 调用 setState() 或 markNeedsBuild() 的小部件是：Overlay-[LabeledGlobalKey#0cfca] 状态：OverlayState#59c05（条目：[OverlayEntry#0d564（不透明：true；maintainState：false），OverlayEntry#1eb73（不透明：false；maintainState：true），OverlayEntry#6d049（不透明：false；maintainState：false），OverlayEntry# 22b33（不透明：假；维护状态：真）]） 发出违规调用时当前正在构建的小部件是：CustomBtn 肮脏的 相关的导致错误的小部件是： CustomBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/screen/login_page.dart:55:20 抛出异常时，这是堆栈： #0 Element.markNeedsBuild。 （包：flutter/src/widgets/framework.dart:4217:11） #1 Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:4232:6) #2 State.setState (package:flutter/src/widgets/framework.dart:1108:15) #3 OverlayState.rearrange (package:flutter/src/widgets/overlay.dart:436:5) #4 NavigatorState._flushHistoryUpdates (package:flutter/src/widgets/navigator.dart:4065:16) ... ==================================================== ====================================================

======== 渲染库捕获的异常 ================================== =================== 在布局期间抛出了以下断言： 一个 RenderFlex 在底部溢出了 99550 像素。

相关的导致错误的小部件是： 列文件:///C:/Users/bhask/StudioProjects/your_store/lib/screen/login_page.dart:22:14 溢出的 RenderFlex 具有 Axis.vertical 的方向。 溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 而言太大。

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#3b882 relayoutBoundary=up3 OVERFLOWING
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=411.4, 0.0<=h<=772.6)
...  size: Size(411.4, 772.6)
...  direction: vertical
...  mainAxisAlignment: spaceBetween
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================
E/flutter ( 3586): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 3018 pos 18: '!navigator._debugLocked': is not true.
E/flutter ( 3586): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
E/flutter ( 3586): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter ( 3586): #2      _RouteEntry.handlePush.<anonymous closure> (package:flutter/src/widgets/navigator.dart:3018:18)
E/flutter ( 3586): #3      TickerFuture.whenCompleteOrCancel.thunk (package:flutter/src/scheduler/ticker.dart:407:15)
E/flutter ( 3586): #4      _rootRunUnary (dart:async/zone.dart:1362:47)
E/flutter ( 3586): #5      _CustomZone.runUnary (dart:async/zone.dart:1265:19)
E/flutter ( 3586): <asynchronous suspension>
E/flutter ( 3586): #6      TickerFuture.whenCompleteOrCancel.thunk (package:flutter/src/scheduler/ticker.dart)
E/flutter ( 3586): <asynchronous suspension>
E/flutter ( 3586): 
I/flutter ( 3586): Clicked the Create Account Button

======== Exception caught by widgets library =======================================================
The following assertion was thrown building CustomBtn(dirty):
'package:flutter/src/widgets/navigator.dart': Failed assertion: line 5067 pos 12: '!_debugLocked': is not true.


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was: 
  CustomBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/screen/register_page.dart:53:20
When the exception was thrown, this was the stack: 
#2      NavigatorState.pop (package:flutter/src/widgets/navigator.dart:5067:12)
#3      Navigator.pop (package:flutter/src/widgets/navigator.dart:2613:27)
#4      _RegisterPageState.build.<anonymous closure> (package:your_store/screen/register_page.dart:56:27)
#5      CustomBtn.build (package:your_store/Widget/custom_btn.dart:14:24)
#6      StatelessElement.build (package:flutter/src/widgets/framework.dart:4648:28)
...
====================================================================================================

======== 渲染库捕获的异常 ================================== =================== 在布局期间抛出了以下断言： 一个 RenderFlex 在底部溢出了 99524 像素。

相关的导致错误的小部件是： 列文件：///C:/Users/bhask/StudioProjects/your_store/lib/screen/register_page.dart:20:14 溢出的 RenderFlex 具有 Axis.vertical 的方向。 溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 而言太大。

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

The specific RenderFlex in question is: RenderFlex#469da relayoutBoundary=up3 OVERFLOWING
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=411.4, 0.0<=h<=772.6)
...  size: Size(411.4, 772.6)
...  direction: vertical
...  mainAxisAlignment: spaceBetween
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================

这是我的代码：

    import 'package:flutter/material.dart';
    import 'package:your_store/Widget/custom_btn.dart';
    import 'package:your_store/Widget/custom_input.dart';
    import 'package:your_store/constants.dart';

    class RegisterPage extends StatefulWidget {
    const RegisterPage({Key? key}) : super(key: key);

    @override
    _RegisterPageState createState() => _RegisterPageState();
    }

    class _RegisterPageState extends State<RegisterPage> {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Container(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: EdgeInsets.only(
              top: 24,
            ),
            child: Text(
              "Create a New Account.",
              textAlign: TextAlign.center,
              style: Constants.boldHeading,
            ),
          ),
          Column(
            children: [
              CustomInput(
                hintText: "Email",
              ),
              CustomInput(
                hintText: "Password",
              ),
              CustomBtn(
                text: "Create New Account",
                onPressed: () {
                  print("Clicked the Create Account Button");
                },
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(
              bottom: 16.0,
            ),
            child: CustomBtn(
              text: "Back to Login",
              onPressed: () {
                Navigator.pop(context);
              },
              outlineBtn: true,
            ),
          ),
        ],
      ),
    )));
  }
}

这是我的 customBtn 的代码：

import 'package:flutter/material.dart';

class CustomBtn extends StatelessWidget {
  final String? text;
  final Function? onPressed;
  final bool? outlineBtn;
  CustomBtn({this.text, this.onPressed, this.outlineBtn});

  @override
  Widget build(BuildContext context) {
    bool _outlineBtn = outlineBtn ?? false;

    return GestureDetector(
      onTap: onPressed!(),
      child: Container(
        height: 65.0,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: _outlineBtn ? Colors.transparent : Colors.black,
          border: Border.all(
            color: Colors.black,
            width: 2.0,
          ),
          borderRadius: BorderRadius.circular(12.0),
        ),
        margin: EdgeInsets.symmetric(
          horizontal: 24.0,
          vertical: 08.0,
        ),
        child: Text(
          //Create New Account
          text ?? "Text",
          style: TextStyle(
            fontSize: 16.0,
            fontWeight: FontWeight.w600,
            color: _outlineBtn ? Colors.black : Colors.white,
          ),
        ),
      ),
    );
  }
}

Answer 1

onTap: onPressed!() 是问题的原因。 如果您将声明更新为 final Function()？ onPressed; 和手势检测器的 onTap 到 onTap: onPressed!，代码运行正常。

更新 CustomBtn 代码：

class CustomBtn extends StatelessWidget {
  final String? text;
  final Function()? onPressed;
  final bool outlineBtn;
  CustomBtn({this.text, this.onPressed, this.outlineBtn = false});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed!,
      child: Container(
        height: 65.0,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: outlineBtn ? Colors.transparent : Colors.black,
          border: Border.all(
            color: Colors.black,
            width: 2.0,
          ),
          borderRadius: BorderRadius.circular(12.0),
        ),
        margin: EdgeInsets.symmetric(
          horizontal: 24.0,
          vertical: 08.0,
        ),
        child: Text(
          //Create New Account
          text ?? "Text",
          style: TextStyle(
            fontSize: 16.0,
            fontWeight: FontWeight.w600,
            color: outlineBtn ? Colors.black : Colors.white,
          ),
        ),
      ),
    );
  }
}