Error: Could not find the correct Provider<ThemeProvider> above this MyApp Widget

Question

I've got a problem, my code doesn't work. I've looked through some of the already existing posts, but nothing has worked.

my main.dart looks like this

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:study_sync/auth/login_or_register.dart';
import 'package:study_sync/theme/theme_provider.dart';



void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Provider.of<ThemeProvider>(context).themeData,
      title: 'Flutter Demo',
      home: const LoginOrRegister(),
      debugShowCheckedModeBanner: false,
    );
  }
}

my theme_provider.dart looks like this:

import 'package:flutter/material.dart';
import 'dark_mode.dart';
import 'light_mode.dart';

class ThemeProvider with ChangeNotifier {
  ThemeData _themeData = lightMode;

  ThemeData get themeData => _themeData;

  bool get isDarkMode => _themeData == darkMode;

  set themeData(ThemeData themeData) {
    _themeData = themeData;
    notifyListeners();
  }

  void toggleTheme() {
    if (_themeData == lightMode) {
      themeData = darkMode;
    } else {
      themeData = lightMode;
    }
  }
}

dependencies in my pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
    # When depending on this package from a real application you should use:
    #   google_sign_in: ^x.y.z
    # See https://dart.dev/tools/pub/dependencies#version-constraints
    # The example app is bundled with the plugin so we use a path dependency on
    # the parent directory to use the current plugin's version.
  cupertino_icons: ^1.0.2
  firebase_core: ^2.4.0
  firebase_auth: ^4.2.0
  google_sign_in: ^5.4.2
  provider: ^6.1.1
  http: any
  theme_provider: ^0.6.0

the error code:

======== Exception caught by widgets library =======================================================
The following ProviderNotFoundException was thrown building MyApp(dirty):
Error: Could not find the correct Provider<ThemeProvider> above this MyApp Widget

This happens because you used a `BuildContext` that does not include the provider
of your choice. 

I've tried many different ways, but nothing has worked

Answer 1

Provider.of gets the instance of ThemeProvider you provided higher up the widget tree. In your example, there is no widget above MyApp. You need to provide your ThemeProvider first like this:

runApp(
  ChangeNotifierProvider<ThemeProvider>(
    create: (context) => ThemeProvider(),
    child: const MyApp(),
  ),
);

You will also need to use ChangeNotifierProvider. This way, wherever you do Provider.of (with listen: true, which is the default value) the widget will get rebuilt if the ChangeNotifier (which your ThemeProvider is) notifies, which is what you want in this example. The ChangeNotifierProvider will also take care of disposing your change notifier when disposing itself.

Alternatively, you could use an ordinary Provider to provide your class, but you would need to override the debugCheckInvalidValueType check to not complain about this class. But for this case you do not want to do that.