[Flutter] Provider Access - Anonymous route

오늘은 Provider 적용후 라우팅을 통한 화면 전환시 데이터 공유에 대해서 정리했습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10

오류가 있는 원본 소스코드 - Release 19_Provider_Access_anonymous_route_error (github.com)

Release 19_Provider_Access_anonymous_route_error · mike-bskim/provider_overview

 

프로젝트는 main.dart, show_me_counter.dart, ./models/counter.dart 파일로 구성되어 있다.

 

화면 구성은 아래와 같다. 첫화면에서 카운터를 증가시킨후, 네비게이션을 통해서 다음페이지에서 카운터값을 보여주는 구조이다.

 

 

네비게이션할때는 새로운 위젯은 하위 위젯으로 생성되는것이 아니고, 별도의 위젯으로 생성되므로 Provider 의 범위에서 벗어난다. 그래서 일반적으로 Provider 로 감쌀때는 라우팅 위젯에서 처리하는게 일반적이다.

 

 

여기서 Provider 전달 문제를 해결하기위해서는 Navigator.push 에서 새로운 위젯을 리턴하는 부분에서 Provider 로 한번 더 Wrap 해주면 된다.

 

Navigator.push(
  context,
  MaterialPageRoute(builder: (_) {
    // push 의 context 와 builder 의 context 충돌. builder 의 context 제거할것.
    // 이유는 value 에서 사용되는 context 는 push 의 context 이기 때문임
    return ChangeNotifierProvider.value(
      value: context.read<Counter>(),
      child: const ShowMeCounter(),
    );
  }),
);

 

 

 

 

[참고자료] udemy - Flutter Provider Essential 코스 (Korean)