Error: Could not find the correct Provider<AppStateNotifier> above this Consumer<AppStateNotifier> Widget

Question

the following error occurs after I tried adding the provider feature to my app:

Error: Could not find the correct Provider above this Consumer Widget

This is my code for the ChangeNotifier:

import 'package:flutter/material.dart';

class AppStateNotifier extends ChangeNotifier {
  bool isDarkMode = false;

  void updateTheme(bool isDarkMode) {
    this.isDarkMode = isDarkMode;
    notifyListeners();
  }
}

And there is my main class:

import 'package:wilson/src/config/theme_data.dart';
import 'package:wilson/src/routes/index.dart';
import 'package:wilson/src/utils/app_state_notifier.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Wilson extends StatelessWidget {
  const Wilson({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Consumer<AppStateNotifier>(builder: (context, appState, child) {
      return MaterialApp(
        title: 'App-Name',
        theme: ThemeConfig.lightTheme,
        darkTheme: ThemeConfig.darkTheme,
        themeMode: appState.isDarkMode ? ThemeMode.dark : ThemeMode.light,
        onGenerateRoute: routes,
      );
    });
  }
}

Maybe someone can help me with that, because I believe it's just a stupid little mistake.

Answer 1

You have to initialize this into your main.dart like this. You can use multi provider if you have more than one provider files.

Widget build(BuildContext context) {
return MultiProvider(
  providers: [
    ChangeNotifierProvider.value(value: Doctorss()),
    ChangeNotifierProvider.value(value: Categoriess()),
    ChangeNotifierProvider.value(value: TopDoctors()),
    ChangeNotifierProvider.value(value: Appointments()),
    ChangeNotifierProvider.value(value: TopArticlesProvider()),
  ],
  child: MaterialApp(
    theme: ThemeData(
        appBarTheme: AppBarTheme(color: Colors.blue[800]),
        primaryColor: Colors.blue[800],
        colorScheme:
            ColorScheme.fromSwatch().copyWith(secondary: Colors.orange)),
    debugShowCheckedModeBanner: false,
    home: StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapShot) {
          if (snapShot.connectionState == ConnectionState.waiting) {
            return const Start();
          }
          if (snapShot.hasData) {
            return const homestate();
          }
          return const AuthScreen();
        }),

Answer 2

this is my main.dart coding

import 'package:flutter_user_profile/home/wrapper.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter_user_profile/services/auth.dart';
import 'package:provider/provider.dart';
import 'package:flutter_user_profile/model/user.dart';

Future <void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
      options: FirebaseOptions(apiKey: "AIzaSyD59Nz0y4Z8S-rVpeu5E5lslsW_8WYrEiE",
          appId: "XXX", messagingSenderId: "XXX", projectId: "parkingtech-f1449") );
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override

  Widget build(BuildContext context){

    return StreamProvider<Client?>.value(
        initialData: null,
      value: AuthService().user,
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
      home: Wrapper(),
    )
    );
  }
}

I am not sure how to add another return as I already have the StreamProvider on my main.dart