Flutter riverpod: 'Bad State No ProvderScope found' after using navigator

Question

I have the following scanario: i`m using the riverpod state management across the application and everything works fine, but when I try to use in a screen that I reach using Navigator, the following error appear:

Bad state: No ProviderScope found

Event:

ListTile(
  leading: Icon(Icons.currency_exchange),
  title: Text('Currency'),
  onTap: () => Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => const CurrencyScreen()),
  ),
),

My Riverpod scope:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      theme: ThemeData(
        brightness: Brightness.light,
        /* light theme settings */
      ),
      darkTheme: ThemeData(
          brightness: Brightness.dark,
          /* dark theme settings */
          ),
      themeMode: ThemeMode.dark,
      /* ThemeMode.system to follow system theme, 
         ThemeMode.light for light theme, 
         ThemeMode.dark for dark theme
      */
      home: const ProviderScope(child: SafeArea(child: AuthHandlerScreen())),
    );
  }

Answer 1

You must wrap the entire application with ProviderScope

void main() {
  runApp(
    // Enabled Riverpod for the entire application
    ProviderScope(
      child: MyApp(),
    ),
  );
}