要从 initState() 异步初始化提供程序但得到“找不到正确的提供程序”

Question

I develop an ad app, with a message button on the detailed view.

When the user tap on it, the chats view (stateful widget) is pushed to the screen.

The initState() is there to call the asyncInitMessages() which asynchronously fetches the chats and related message from the distant database. The asyncInitMessages() belongs to the Chats class which extends ChangeNotifier .

/// A chat conversation
class Chats extends ChangeNotifier {
  /// Internal, private state of the chat.


  void asyncInitMessages(
      {required ClassifiedAd ad,
      required String watchingUserId,
      required bool isOwner}) async {

     // blah blah
  }
}

The ClassifiedAdMessagesView stateful widget class implementation is as follows (snipet):

  @override
  void initState() {
    
    // == Fetch conversation and messages 
    asyncInitMessages();

  }


void asyncInitMessages() async {
    // === Update all messages
    try {
      Provider.of<Chats>(context, listen: false).asyncInitMessages(
          ad: widget.ad,
          watchingUserId: widget.watchingUser!.uid,
          isOwner: _isOwner);
    } catch (e) {
      if (mounted) {
        setState(() {
          _error = "$e";
          _ready = true;
        });
      }
    }
  }


  @override
  Widget build(BuildContext context) {
    // <<<<<<<<<<< The exception fires at the Consumer line right below
    return Consumer<Chats>(builder: (context, chats, child) {
      return Scaffold(
        // ... blah blah 

Finally, when running ll that, I got the exception in the build at the Consumer line:

could not find the correct Provider<chats>

Help greatly appreciated.

[UPDATED]

Here is the main (very far up from the messages screen)

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  //if (Firebase.apps.isEmpty) {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  // } else {
  //   Firebase.app(); // if already initialized, use that one
  // }
  if (USE_DATABASE_EMULATOR) {
    FirebaseDatabase.instance.useDatabaseEmulator(emulatorHost, emulatorPort);
  }

  runApp(RootRestorationScope(
      restorationId: 'root',
      child: ChangeNotifierProvider(
          create: (context) => StateModel(),
          child: const App())));
}


class App extends StatefulWidget {
  const App({super.key});
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  @override
  Widget build(BuildContext context) {
    return PersistedAppState(
        storage: const JsonFileStorage(),
        child: MultiProvider(
            providers: [
              ChangeNotifierProvider<ThemeModel>.value(value: _themeModel),
              //ChangeNotifierProvider<AuthModel>.value(value: _auth),
            ],
            child: Consumer<ThemeModel>(
                builder: (context, themeModel, child) => MaterialApp(
                  // blah blah

    }
  }
}

And the component just on top of the

/// Classified ad detail view
class ClassifiedAdDetailView extends StatefulWidget {
  final User? watchingUser;
  final ClassifiedAd ad;

  const ClassifiedAdDetailView(
      {Key? key, required this.watchingUser, required this.ad})
      : super(key: key);

  @override
  State<ClassifiedAdDetailView> createState() => _ClassifiedAdDetailViewState();
}

class _ClassifiedAdDetailViewState extends State<ClassifiedAdDetailView>
    with TickerProviderStateMixin {

 @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) => Chats(),
        builder: ((context, child) => Scaffold(

// blah blah

          ElevatedButton(
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
                                builder: (context) => ClassifiedAdMessagesView(
                                    ad: ad,
                                    watchingUser: widget.watchingUser)));
                          }),

Answer 1

Providers must be located in the widget tree above the widget where you want to use them with Consumer or Provider.of . When you push a new route with Navigator , it won't be add the pushed route below the widget from where you push, it will add it at the same level where home of MaterialApp is located.

(I think the error message you get also states that you can't access the providers between routes.)

In general the tree will look like this if you push some routes (check it with the Flutter Widget Inspector):

• MaterialApp
  • home
    • widget1
    • widget2
      • widget21
      • widget22
  • page1
    • widget1
    • widget2
  • page2
  • page3

In your code you create the provider in ClassifiedAdDetailView and then push
ClassifiedAdMessagesView from this in the onPressed method. You won't be access this provider from ClassifiedAdMessagesView because the tree will be like (simplified):

• MaterialApp
  • home
  • ClassifiedAdDetailView
  • ClassifiedAdMessagesView

The solution is to "lift the state up" and place the provider above every widget from where you need to access it. It can be a part of your existing Multiprovider above MaterialApp but if it is too far, you need to find a proper place that is above both ClassifiedAdDetailView and ClassifiedAdMessagesView .