错误:底部的 RenderFlex 溢出了 99524 像素

时间:2021-06-22 06:32:37

标签: android flutter android-studio dart flutter-layout

这里是错误:

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

无法将此 Overlay 小部件标记为需要构建,因为框架已在构建小部件的过程中。仅当其祖先之一当前正在构建时,才可以将小部件标记为需要在构建阶段构建。允许此异常是因为框架在子级之前构建父级小部件,这意味着将始终构建脏后代。否则,框架可能不会在此构建阶段访问此小部件。 调用 setState() 或 markNeedsBuild() 的小部件是:Overlay-[LabeledGlobalKey#0cfca] state: OverlayState#59c05(entries: [OverlayEntry#0d564(opaque: true;maintainState: false), OverlayEntry#1eb73(opaque: false;maintainState: true), OverlayEntry#6d049(opaque: 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,
          ),
        ),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分: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,
          ),
        ),
      ),
    );
  }
}