[Flutter] Provider Error: Could not find the correct Provider<BottomNavigationProvider> above this Home Widget

현재 게시판 어플을 만들고 있는데 provider를 적용해서 코드를 짜고 있다.

 

구조는 Splash 화면을 먼저 실행시키고 home화면을 만들어 놓고 home화면에서 Provider를 이용하여 BottomNavigation을 사용하기로 했다.

 

우선 아래와 같이 코드를 먼저 짰다.

 

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (BuildContext context) => BottomNavigationProvider())
        ],
        child: new SplashScreen(),
      ),
    );
  }
}

 

Provider를 하나만 쓸 것 같지는 않아서 MultiProvider로 우선 설정했다.

 

SplashScreen이 먼저 실행되고 SplashScreen에서 사용자 정보를 받아온 후 메인인 Home화면으로 넘어간다.

그리고 Home화면에선 BottomNavigationProvider를 초기화 시켜준 상태.

 

후에 앱을 실행을 했을 때 다음과 같은 에러가 나왔다.

Error: Could not find the correct Provider<BottomNavigationProvider> above this Home Widget

 

해당 에러를 찾아보니 provider가 MyApp이 아니라 SplashScreen에 종속되어 있어서 그런 것 같다.

MultiProvider를 위로 올리고 하위로 MaterialApp을 home으로 옮겨주면 된다.

 

아래와 같이 말이다!

 

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (BuildContext context) => BottomNavigationProvider())
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new SplashScreen(),
      ),
    );
  }
}

이렇게 하고 실행을 하게 되면 에러없이 잘 실행되는 것을 볼 수 있다.