Use showDialog with conditional in build method

Question

I have a screen, which shows a button. If I press it, an async job is started. During this time, I want to show an AlertDialog with a spinning wheel. If that job is finished, i will dismiss the dialog or show some errors. Here is my (simplified) code:

Widget build(BuildContext context) {
  if (otherClass.isTaskRunning()) {
    showDialog( ... ); // Show spinning wheel
  }

  if (otherClass.hasErrors()) {
    showDialog( ...); // Show errors
  }

  return Scaffold(
    ...
    FlatButton(
      onPress: otherClass.startJob
    )
  );
}

The build will be triggered when the job status is changed or if there are errors. So far, so good, but if I run this code, I got this error message:

Exception has occurred. FlutterError (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#357d8] The widget which was currently being built when the offending call was made was:
SettingsScreen)

So, the repaint of the screen will be overlap somehow. I am not sure how to fix this. It feels like I am using this completely wrong. What is the prefered way to handle this kind of interaction (trigger "long" running task, show progress indicator and possible errors)?

Answer 1

As being said in the comment, calling showDialog and similar inside build is anti-pattern. Here is the detailed explanation.

Although is a bit late, it is important to note showDialog is indeed a async method, returning at the time that the dialog dismisses, and build is a sync in nature. Under the hood, it use Navigator.of(context).push.

Referring to this question,

The build method is designed in such a way that it should be pure/without side effects. This is because many external factors can trigger a new widget build, such as: Route pop/push

So this directly caused flutter to complain setState is called during build. You could just use a FutureBuilder inside the dialog.

One thing is clear is that your SettingsScreen is not required to fetch anything and so you should not brother with any of them. As you are deferring to do that as the button fires, then you should do it within dialog.

Widget build(BuildContext context) {
  return Scaffold(
    body: FlatButton(
      onPress: () async {
        await showDialog(
          context: context,
          builder: (BuildContext context) {
            return FutureBuilder(
              future: otherClass.startJob(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.hasError) // Show error
                  if (snapshot.hasData) // Show data, or you can just close it by Navigator.pop
                  else // show spinning wheel
                }
              }
            );
          }
        );
      }
    )
  );
}

Answer 2

The problem is the dialog is going to show while the build method hasn't already finish. So if you want to show a Dialog, you should do it after the build method has finished. To do that, you can use this: WidgetsBinding.instance.addPostFrameCallback(), that will call a function after the last frame was built (just after build method ends).
Other thing you can do is using the ternary operator to show a loading widget like so:

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: otherClass.isTaskRunning()
          ? CircularProgressIndicator()
          : FlatButton(
              onPressed: () {},
            ),
    );
  }