Error: Could not find the correct Provider above this MyWidget Widget
This happens because you used a BuildContext that does not include the provider
of your choice. There are a few common scenarios:
- You added a new provider in your
main.dartand performed a hot-reload. To fix, perform a hot-restart. - The provider you are trying to read is in a different route. Providers are "scoped". So if you insert of provider inside a route, then other routes will not be able to access that provider.
- You used a
BuildContextthat is an ancestor of the provider you are trying to read. Make sure that MyWidget is under your MultiProvider/Provider. This usually happens when you are creating a provider and trying to read it immediately. For example, instead of:
consider usingWidget build(BuildContext context) { return Provider<Example>( create: (_) => Example(), // Will throw a ProviderNotFoundError, because `context` is associated // to the widget that is the parent of `Provider<Example>` child: Text(context.watch<Example>().toString()), ); }builderlike so: ```consider usingbuilderlike so:Widget build(BuildContext context) { return Provider<Example>( create: (_) => Example(), // we use `builder` to obtain a new `BuildContext` that has access to the provider builder: (context, child) { // No longer throws return Text(context.watch<Example>().toString()); } ); }
import 'package:flutter/material.dart'; import 'package:provider/provider.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => CounterProvider()), ChangeNotifierProvider(create: (context) => SettingsProvider()), ], child: CounterWidget(), ), ); } }
abstract class BaseProvider extends ChangeNotifier { double executionSpeed = 1.0;
void updateExecutionSpeed(double speed) { executionSpeed = speed; notifyListeners(); } }
abstract class BaseProvider2 extends BaseProvider { double executionSpeed2 = 1.0;
void updateExecutionSpeed2(double speed) { executionSpeed = speed; notifyListeners(); } }
class CounterProvider extends BaseProvider2 { int _value = 0;
int get value => _value;
void increment() { _value++; notifyListeners(); }
void decrement() { _value--; notifyListeners(); } }
class SettingsProvider extends BaseProvider2 { bool _darkMode = false;
bool get darkMode => _darkMode;
void toggleDarkMode() { _darkMode = !_darkMode; notifyListeners(); } }
class CounterWidget extends StatelessWidget { @override Widget build(BuildContext context) { final counterProvider = Provider.of(context); final settingsProvider = Provider.of(context);
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Count: ${counterProvider.executionSpeed}',
style: TextStyle(fontSize: 24),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
counterProvider.increment();
},
),
IconButton(
icon: Icon(Icons.remove),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyWidget()),
);
},
),
],
),
Switch(
value: settingsProvider.darkMode,
onChanged: (value) {
settingsProvider.toggleDarkMode();
},
),
Text('Dark Mode: ${settingsProvider.darkMode ? 'On' : 'Off'}'),
],
),
),
);
} }
class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { final counterProvider = Provider.of(context); final settingsProvider = Provider.of(context); return Scaffold( appBar: AppBar( title: Text('My Widget'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Count: ${counterProvider.executionSpeed}', style: TextStyle(fontSize: 24), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ IconButton( icon: Icon(Icons.add), onPressed: () { counterProvider.increment(); }, ), IconButton( icon: Icon(Icons.remove), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => MyWidget()), ); }, ), ], ), Switch( value: settingsProvider.darkMode, onChanged: (value) { settingsProvider.toggleDarkMode(); }, ), Text('Dark Mode: ${settingsProvider.darkMode ? 'On' : 'Off'}'), ], ), ), ); } }