setState() or markNeedsBuild() called during build - Flutter

Question

Im getting this error. Link of a package in debug console where error is likely happening is builder function of ResponsiveSafeArea class which is given below

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building LayoutBuilder:
setState() or markNeedsBuild() called during build.
This _ModalScope<dynamic> 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:
  _ModalScope<dynamic>-[LabeledGlobalKey<_ModalScopeState<dynamic>>#e51b7]
The widget which was currently being built when the offending call was made was:
  LayoutBuilder

Below is class causing error

class CustSigninView extends StatefulWidget {
  @override
  _CustSigninViewState createState() => _CustSigninViewState();
}

class _CustSigninViewState extends State<CustSigninView> {
  final TextEditingController _phNoController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;

    bool tempBool = true;             <------------ TEMP "BOOL" JUST FOR TESTING
    
   return BaseView<CustSignInViewModel>(
      builder: (context, model, child) => ResponsiveSafeArea(
        builder: (context, widgetSize) => Scaffold(
          body: Material(
            type: MaterialType.card,
            child: Stack(
              children: <Widget>[

             ListView(  //ListView
                
                // --------  I'M GETTING  E R R O R  IN BELOW LINE.
                tempBool
                    ? UIHelper().showErrorButtomSheet(context, "errorText"))
                    : Container(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

If I replace UIHelper().showErrorButtomSheet(context, "errorText")) with Container() inside tempBool condition, it works fine. There is an issue with UIHelper().showErrorButtomSheet(context, "errorText")).

Below is the showErrorButtomSheet function in UIHelper class

  /// Returns a Error Dialog
  Future showErrorButtomSheet(BuildContext context, String errorText) {
    Size deviceSize = MediaQuery.of(context).size;
    return showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        child: StatefulBuilder(
          builder: (BuildContext context, StateSetter stateSetter) {
            return Row(
              children: <Widget>[
                Icon(...),
                Text(...),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

ResponsiveSafeArea class looks something like this. redirected to the builder function upon clicking the error package link in Debug Console

typedef Responsive_Builder = Widget Function(
  BuildContext context,
  Size,
);

class ResponsiveSafeArea extends StatelessWidget {
  final Responsive_Builder responsiveBuilder;

  const ResponsiveSafeArea({
    Key key,
    @required Responsive_Builder builder,
  })  : responsiveBuilder = builder,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: LayoutBuilder(
        builder: (context, constraints) {
          return responsiveBuilder(
            context,
            constraints.biggest,
          );
        },
      ),
    );
  }
}

Answer 1

Faizan Kamal you are trying to display showModalBottomSheet which cannot be displayed like other widgets. i suggest you to use your custom widget to display the errorText lie below:

Widget showErrorWidget(BuildContext context, String errorText) {
    return Row(
      children: <Widget>[
        Icon(Icons.error),
        Text(errorText),
      ],
    );
  }

And use it like this:

...
   tempBool
        ? UIHelper(). showErrorWidget(context, "errorText"))
        : Container(),
   ...

To display the dialog, you've to handle an event to achieve this, for example after layout event:

if(!tempBool)
     Container(), // We display this container when tempBool is false, else we display the dialog

Finally add afterLayout event:

@override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) => _afterLayout(context));
    super.initState();
...
}

_afterLayout(BuildContext context) async {
    if(tempBool)
        await UIHelper().showErrorButtomSheet(context, "errorText");
}