Navigate while Widget state build is being executed

Question

I'm building a simple Flutter app. Its launch screen determines if the user if logged in or not, and depending on that redirects to the login or main/home screen afterwards.

My Launch screen is a StatefulWidget, its state is shown below. It uses a ViewModel class that extends ChangeNotifier (its code is irrelevant, so I didn't include it).

class _LaunchPageState extends State<LaunchPage> {
          LaunchViewModel _viewModel = LaunchViewModel();

          @override
          void initState() {
            super.initState();
            _viewModel.checkSessionStatus();
          }

          @override
          Widget build(BuildContext context) {
            return ChangeNotifierProvider<LaunchViewModel>(
              builder: (_) => _viewModel,
              child: Scaffold(
                body: Consumer<LaunchViewModel>(
                  builder: (context, viewModel, _) {
                    if (viewModel.state is LaunchInitial) {
                      return CircularProgressIndicator();
                    }
                    if (viewModel.state is LaunchLoginPage) {
                      Navigator.pushNamed(context, "login");
                    }
                    if (viewModel.state is LaunchMainPage) {
                      Navigator.pushNamed(context, "main");
                    }
                    return Container();
                  },
                ),
              ),
            );
          }
        }

The ViewModel emits one of 3 states:

LaunchInitial: Default state.
LaunchLoginPage: Indicates that the Login page should be displayed.
LaunchMainPage: Indicates that the Main page should be displayed.

The LaunchInitial state is handled fine, and a progress bar is displayed on the screen. But the other 2 states cause the app to crash. The following error is thrown:

This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets

It seems that trying to redirect to another screen while the Consumer's build method is being executed is causing this issue. What's the correct way to do this?

Thanks!

Mehmet Esen · Accepted Answer · 2021-06-08T10:44:08.573

You can't directly call Navigator within widget tree. If you have event-state builder, so better change the widget tree you are rendering:

builder: (context, viewModel, _) {
                    if (viewModel.state is LaunchInitial) {
                      return CircularProgressIndicator();
                    }
                    if (viewModel.state is LaunchLoginPage) {
                      return LoginPage();
                    }
                    if (viewModel.state is LaunchMainPage) {
                      return MainPage();
                    }
                    return Container();
                  },

You have to return Widget with each child inside build method.

Alternatively, you can do this with Navigation:

  @override
  void didChangeDependencies() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (viewModel.state is LaunchLoginPage) {
        Navigator.pushNamed(context, "login");
      }
      if (viewModel.state is LaunchMainPage) {
        Navigator.pushNamed(context, "main");
      }
    });
    super.didChangeDependencies();
  }

addPostFrameCallback method will be called right after the build method completed and you can navigate inside.

Be sure your provider don't have lifecycle issue.

But I'd like to navigate away from the Launch screen and go to either the login or main screens, instead of just replacing the content of the Launch screen. — Husayn Hakeem, Jul 28 '19 at 23:54
Ah, so the navigation happens after the widget is built, seems like a good approach. Thanks! — Husayn Hakeem, Jul 29 '19 at 17:42
Returning the progress widget in the post frame callback is useless and should be removed. This has to be in the build() method instead (and does not need any qualification). — Ber, Jun 07 '21 at 09:37
@Ber you are right. Thanks for heads-up, probably I copy-pasted the code directly, anyways it was misleading. — Mehmet Esen, Jun 08 '21 at 10:44

Navigate while Widget state build is being executed

1 Answers1