Error : A RenderFlex overflowed by 99524 pixels on the bottom

Question

Here is the error:

The following assertion was thrown building CustomBtn(dirty): setState() or markNeedsBuild() called during build.

This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase. The widget on which setState() or markNeedsBuild() was called was: 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(opaque: false; maintainState: true)]) The widget which was currently being built when the offending call was made was: CustomBtn dirty The relevant error-causing widget was: CustomBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/screen/login_page.dart:55:20 When the exception was thrown, this was the stack: #0 Element.markNeedsBuild. (package: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) ... ====================================================================================================

======== Exception caught by rendering library ===================================================== The following assertion was thrown during layout: A RenderFlex overflowed by 99550 pixels on the bottom.

The relevant error-causing widget was: Column file:///C:/Users/bhask/StudioProjects/your_store/lib/screen/login_page.dart:22:14 The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the 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)
...
====================================================================================================

======== Exception caught by rendering library ===================================================== The following assertion was thrown during layout: A RenderFlex overflowed by 99524 pixels on the bottom.

The relevant error-causing widget was: Column file:///C:/Users/bhask/StudioProjects/your_store/lib/screen/register_page.dart:20:14 The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the 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#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
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================

Here is my code:

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

Here it's the code for my 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,
          ),
        ),
      ),
    );
  }
}

Solution

onTap: onPressed!() is the cause of the issue. If you update the declaration to final Function()? onPressed; and onTap of gesture Detector to onTap: onPressed!, code runs fine.

Updated CustomBtn code:

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

Comments

[Krish Bhanushali]

can you share what actually custombtn is ?

[Bhaskar2510]

I've updated my code please check it

[Bhaskar2510]

Could you please help me more with this error too stackoverflow.com/questions/68444061/…