Flutter/dart 상태관리의 어려움

Flutter Dropdown을 만들다

앱에서 흔히 볼 수 있는 기능 중 하나로 드롭다운이 있다. 토스앱에도 물론 있었다 그중 하나를 만들고자 했다. 사진에 보이는 달력접기 버튼이 드롭다운의 예시이다. 달력 접기를 누르면 아래쪽에 보이는 주식들이 숨겨질 것이다.

구현전

누르면 화살표 바뀌는 것은 GestureDetector와 state의 변경으로 쉽게 구현이 가능하다.

구현방법

처음엔 라이브러리를 쓰려 했는데 마땅한 것을 못 찾았다. 내가 원하는것과 차이가 있었다고 하는게 맞겠다. 그래서 직접 만들었다. 버튼을 누르면 화살표 방향이 바뀌고 목록들을 숨겼다 보여줬다 하는데에는 Visibility 위젯을 이용했다.

문제점

InterestingStockList안에서 _down을 함께 쓰기 위해서는 하나의 위젯을 둘로 쪼개야했다. 뿐만 아니라 같은 변수를 공유하다보니 이것을 선언하기 위해 전혀 관련 없는 상위 widget에 변수를 선언해야했다.

현재 예시에서는 드러나지 않지만 InterestingStockList안에는 여러가지 다른 위젯들이 함께 있었다. _down을 GestureDetector와 Visibility에서 모두 사용하기 위해 _down을 _down을 안쓰는 다른 위젯들까지 포함한 상위 위젯에 선언하는 매우 비효율적인 구현을 한것

방법을 강구했지만 Column과 Visibility 위젯을 묶어서 return 할 방법이 없었다. 그래서 리액트때 상태를 전역적으로 관리하는 redux같은게 있지 않을까 싶은 생각에 Flutter redux라고 검색을 하였는데 똑같은게 있었다. 하지만 이것을 다루는 것은 Flutter의 provider와 GetX를 배운 이후가 될것이다. 드롭다운 문제에 관해서는 훨씬 간편한 방법이 있다.

작성자: YunSukHyun