[Flutter] Inherited Widget

📌 Mac M2 pro 사용

오늘은 Inherited Widget에 대해서 알아보자. 만약 내가 페이지를 구성할 때 하단에서 사용할 데이터를 전달할 때 트리의 top에서 bottom까지 데이터를 전달하게 되는데, 이때 위젯의 개수가 많아질수록 불필요한 데이터 전달이 많아지게 된다. 이때 Inherited Widget을 최상단에 선언 후 데이터를 저장하게되면 자식 위젯들은 이 데이터에 불필요한 데이터 전달 없이 데이터로 바로 접근이 가능하다. 아래 이미지를 참고하자!

구성

Inherited Widget에 대해서 알아보기 위해 간단한 앱을 만들어보았다. 체크박스가 있는 리스트뷰와 체크한 아이템의 개수를 보여주는 화면으로 구성되어있다.

화면 구성 코드이다.
CheckBoxBgWidget()에는 체크박스 리스트화면이 구성되어있고, TotalCountWidget()에는 체크한 아이템의 개수를 보여주는 화면이다. 이 부분은 해당 포스팅에는 관련은 없으니 따로 추가해놓진 않았지만 내 깃허브에 들어가면 전체 코드를 확인할 수 있다.
[해당 깃허프 프로젝트 주소 클릭!]

Inherited Widget

이제 Inherited Widget을 사용하는 방법에 대해 알아보자. 우선 밑 코드는 내가 작성한 코드이다. AppState 클래스에서는 checkList를 가지고있다. 이때 생성자는 빈 Set을 할당한다. copyWith 메소드를 통해 상태를 변경한 새 인스턴스를 생성할 수 있다.
AppStateScope 클래스는 InheritedWidget을 상속받는 클래스이다. 여기서 of 메소드를 통해 인스턴스의 data를 가지고 올 수 있다. updateShouldNotify 메소드는 데이터가 변경되었을 때 위젯이 업데이트 되어야 하는지 결정하는 메소드이다.

사용 방법

먼저 Inherited Widget을 사용하기 위해 아래처럼 StatefulWidget 위젯을 생성하였다.

addToList를 통해 선택한 체크박스의 id를 checkList에 넣어주고 copyWith 메소드를 통해 상태를 변경한 새 인스턴스를 생성한다. removeToList는 체크 박스 해제 시 checkList에 해당 id를 삭제해주고 나머지는 동일하다. 이렇게 StatefulWidget을 생성한 뒤 최상단을 아래 코드처럼 생성한 위젯으로 감싸면 사용이 가능하다.

접근을 할 경우는 위에서 말한 것 처럼 of메소드를 사용해서 접근한다.

끝으로..

오늘은 Inherited Widget에 대해서 알아보았다. 코드가 길어 복잡해 보일 수 있지만 차근차근 따라하면 어렵지 않게 Inherited Widget을 사용할 수 있을 것이다. 나는 Inherited Widget을 학습할 때 공식홈페이지의 codelab을 보고 공부하였다. 시간이 괜찮다면 공식 홈페이지의 codelab에서 Inherited Widget에 대해 자세하게 알아보는것도 추천한다!
끄읕..!