<Flutter> ListViewItem 내 버튼을 누르는 경우 특정 위젯 보이기/숨기기

 

🧭

 

어떤 경우에?

ListView 내 ListViewItem에서 버튼을 누르는 경우 별도의 위젯을 보였다가 숨겼다가 하고 싶은 경우가 있습니다.

가령 인스타그램, 트위터 같이 피드들을 리스트 형식으로 보여주는 앱에서 점 3개짜리 버튼을 누르면, 메뉴 선택 창이 화면위의 특정 위치를 차지하는 경우가 있을 것입니다.

 

어떻게?

isVisible 같은 bool 타입의 변수를 만들어서 값을 저장해 두면 될 것 같습니다.

이 변수를 어디에서 정의해야 할까요?

상태가 변해야 하니까 StatefulWidget을 활용해야 겠습니다.

ListView를 포함하는 부모 위젯을 StatefulWidget으로 정의하고 싶겠지만 그렇게 했다간 상태가 변할 때마다 부모 위젯도 매번 다시 그려지면서 상태가 초기화되는 안타까운 경험을 할 것입니다.

이럴 때는 ListViewItem 위젯을 별도의 StatefulWidget으로 정의한 후 해당 위젯의 상태 값으로 isVisible을 정의하여 버튼을 클릭한 위젯과 관련된 ListViewItem 위젯만 리빌드되도록 처리합니다.

아래는 예시 코드입니다.

 

📌

 

https://api.flutter.dev/flutter/widgets/ListView-class.html

ListView class - widgets library - Dart API

https://terry1213.github.io/flutter/flutter-statefulwidget-setState/

[Flutter] StatefulWidget & setState() 정리하기

https://stackoverflow.com/questions/57994179/problem-switch-values-in-listview-flutter

Problem switch values in ListView flutter