Flutter의 앱 상태 관리. Provider

ChangJoo Park
3 min readJul 9, 2019

--

앱 개발을 하다보면 사용자 인증 정보같은 앱 전역에서 사용할 데이터가 생깁니다. 이런 데이터들은 “상태관리”가 필요한데, Vue.js를 사용한다면 Vuex가, React를 사용하신다면 MobX 등을 이용하여 상태관리를 해본 경험이 있을 것입니다.

로그인 되면 로그인된 사용자 계정을 보여준다거나, 로그아웃하면 로그인을 요구하는 화면으로 보여주는 경우에 상태관리가 필요합니다. SideDrawer를 바꾸어야하고, AppBar의 아바타도 없애야하는 동시에 Scaffold의 body도 변경해야합니다.

이전에는 BloC 패턴을 주로 사용했습니다.

좋은 상태관리 방식이지만 설정이 조금 필요하다는 단점이 있습니다. 저는 BloC 패턴을 적용하기 전에 전역 위젯 방식을 이용하여 상태관리를 하고 있어 익숙하지 않습니다.

2019년 Google I/O에서 Pragmatic State Management in Flutter 라는 제목으로 Provider 패키지와 사용 예를 보여주는 세션이 있었습니다. 방금 전에 말한 전역 위젯 방식 상태관리입니다.

Flutter의 실용적인 상태관리

아마 위 세션 녹화본을 끝까지 보시면 provider 패키지를 이용한 상태관리를 바로 해보고 싶을거라 생각합니다.

위 provider 패키지를 이용한 카운터 예제입니다. 실제 작동하는 프로젝트는 여기에 있습니다.

상태를 가지는 StatefulWidget처럼 동작하지만 StatelessWidget을 사용합니다. Provider가 Widget을 implement하고 상태를 해당 위젯 대신 다른 위젯들에 알려주는 방식을 이용하기 때문입니다. 자세한 내용은 https://github.com/rrousselGit/provider/blob/master/packages/provider/lib/src/provider.dart 에서 알아보실 수 있습니다.

“MultiProvider”를 이용해 여러가지 분리된 상태관리도 할 수 있는데, 틈틈히 만들고있는 이 프로젝트에 전역 테마 관련 상태와 로그인 Account 상태를 동시에 앱 전체에 적용할 수 있는 방법을 구현해놓았습니다. 확인해보시고 더 좋은 방법이 있다면 Pull Request해주세요.

이 글을 읽고 계신 분은 어떤 상태관리를 하고 있고, provider는 어떻게 생각하시는지 궁금합니다. 언제든지 의견 부탁드립니다.

--

--