Flutter - Could not find the correct Provider<Provider> above this ChangeLocation Widget

Question

I'm using both BlocProvider & ChangeNotifierProvider in my app. The flow of the app goes here:-

1. first time user opens the app: InstructionPage() -> WelcomePage() -> HomePage() //getting error
2. second time user opens the app: HomePage() //working fine

I'm using sharedPreference to store the value of isInstructionPageLoaded. But navigating from WelcomePage() to HomePage() getting error Could not find the correct Provider above this ChangeLocation Widget

here is my code:-

//main.dart

      void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await StorageUtil.getInstance();
      runApp(MyApp());
    }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Theme.of(context).copyWith(primaryColor: kBgColorGreen),
      home: MultiBlocProvider(
          providers: [
            BlocProvider(
                create: (context) =>
                    RestaurantBloc()..add(RestaurantPageFetched())),
          ],
          child: MultiProvider(
            providers: [
              ChangeNotifierProvider(
                  create: (context) => LocationServiceProvider()),
            ],
            child: StorageUtil.getBoolValue(
                    SharedPrefsKeys.isInstructionPageLoaded)
                ? HomePage()
                : InstructionScreen(),
          )),
      routes: Routes.getRoutes(),
    );
  }
}

//routes.dart

class Routes {
  static const String instruction = '/instruction';
  static const String welcome = '/welcome';
  static const String home = '/home';
  static const String change_location = '/change_location';

  static Map<String, WidgetBuilder> getRoutes() {
    return {
      Routes.instruction: (context) => InstructionScreen(),
      Routes.welcome: (context) => WelcomePage(),
      Routes.home: (context) => HomePage(),
      Routes.change_location: (context) => ChangeLocation(),
    };
  }
}

//location_service.dart

class LocationServiceProvider extends ChangeNotifier {
  void toogleLocation(LocationService location) {
    location.isLocationUpdated = !location.isLocationUpdated;
    notifyListeners();
  }
}

class LocationService {
  bool isLocationUpdated = false;
}

//welcome_page.dart - on button pressed calling below method

 void _navigateToHomePage() async {
Navigator.push(context, MaterialPageRoute(builder: (context) {
  return BlocProvider(
    create: (context) => RestaurantBloc()..add(RestaurantPageFetched()),
    child: ChangeNotifierProvider(create: (context) => LocationServiceProvider(),
    child: HomePage(),),
  );
}));

}

I have added BlocProvider in above method becoz before it was giving me error blocprovider.of() called with a context that does not contain a bloc navigating from other screen from navigating from WelcomePage() to HomePage().

Thanks in advance!!!

Answer 1

To make sure the blocs are exposed to new routes, you need to follow the documentation and add BlocProvider.value() to provide the value of the bloc to new routes. This will carry the bloc's state and make your life easier.

Check the Official Documentations for a clear step-by-step guide ;).