Flutter MultiProvider: setState() or markNeedsBuild() called during build - flutter

Question

When I do this:
import 'package:blogs/common/theme.dart';
import 'package:blogs/screen/home.dart';
import 'package:blogs/state/authstate.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(
MultiProvider(
providers: [ChangeNotifierProvider(create: (context) => AuthState())],
child: const MyApp(),
)
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var authState = context.watch<AuthState>();
if (authState.idToken == null) {
authState.signInWithAutoCodeExchange();
}
return MaterialApp(
title: 'Blogs',
theme: appTheme,
initialRoute: '/',
routes: {'/': (context) => const Home()},
);
}
}
I'm getting
======== Exception caught by foundation library ====================================================
The following assertion was thrown while dispatching notifications for AuthState:
setState() or markNeedsBuild() called during build.
This _InheritedProviderScope<AuthState?> 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: _InheritedProviderScope<AuthState?>
value: Instance of 'AuthState'
listening to value
The widget which was currently being built when the offending call was made was: MyApp
dirty
dependencies: [_InheritedProviderScope<AuthState?>]
When the exception was thrown, this was the stack:
#0 Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:4424:11)
#1 Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:4439:6)
#2 _InheritedProviderScopeElement.markNeedsNotifyDependents (package:provider/src/inherited_provider.dart:570:5)
#3 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:308:24)
#4 AuthState.isBusy= (package:blogs/state/authstate.dart:20:5)
#5 AuthState.setBusyState (package:blogs/state/authstate.dart:210:5)
#6 AuthState.signInWithAutoCodeExchange (package:blogs/state/authstate.dart:175:7)
#7 MyApp.build (package:blogs/main.dart:21:17)
#8 StatelessElement.build (package:flutter/src/widgets/framework.dart:4827:28)
#9 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4754:15)
#10 Element.rebuild (package:flutter/src/widgets/framework.dart:4477:5)
#11 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4735:5)
#12 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4729:5)
#13 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14)
#14 Element.updateChild (package:flutter/src/widgets/framework.dart:3540:18)
#15 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4780:16)
#16 _InheritedProviderScopeElement.performRebuild (package:provider/src/inherited_provider.dart:495:11)
#17 Element.rebuild (package:flutter/src/widgets/framework.dart:4477:5)
#18 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4735:5)
#19 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4729:5)
#20 _InheritedProviderScopeElement.mount (package:provider/src/inherited_provider.dart:395:11)
... Normal element mounting (7 frames)
#27 SingleChildWidgetElementMixin.mount (package:nested/nested.dart:222:11)
... Normal element mounting (7 frames)
#34 _NestedHookElement.mount (package:nested/nested.dart:187:11)
... Normal element mounting (7 frames)
#41 SingleChildWidgetElementMixin.mount (package:nested/nested.dart:222:11)
#42 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14)
#43 Element.updateChild (package:flutter/src/widgets/framework.dart:3540:18)
#44 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1198:16)
#45 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1167:5)
#46 RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:1112:18)
#47 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2600:19)
#48 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1111:13)
#49 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:944:7)
#50 WidgetsBinding.scheduleAttachRootWidget.<anonymous closure> (package:flutter/src/widgets/binding.dart:924:7)
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
The AuthState sending notification was: Instance of 'AuthState'
====================================================================================================
But when I do this:
import 'package:blogs/common/theme.dart';
import 'package:blogs/screen/home.dart';
import 'package:blogs/state/authstate.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [ChangeNotifierProvider(create: (context) => AuthState())],
child: MaterialApp(
title: 'Blogs',
theme: appTheme,
initialRoute: '/',
routes: {'/': (context) => const Home()},
),
);
}
}
I can't have
var authState = context.watch<AuthState>();
if (authState.idToken == null) {
authState.signInWithAutoCodeExchange();
}
in there before the 1st route is invoked.
However the app starts and runs normally, as the error output states, "exception is allowed".
As I have now found out the culprit is
if (authState.idToken == null) {
authState.signInWithAutoCodeExchange();
}
I'm guessing the state is accessed before building is finished.
I'm thinking maybe wrap it all in a widget, but I need to somehow make sure that building has finished before the state is accessed. How do I make sure that's the case?
I believe this is just not the correct way to approach this problem.
Is there a better or more elegant solution to require the user to be authenticated?

Answer 1

I think this error happens because you tried to call context before flutter has finished building the widget tree.
use this for flutter to execute your code after flutter has finished building the widget.
WidgetsBinding.instance.addPostFrameCallback((_) {// your code in here});