[005] 플러터 (Flutter) 배우기 - GestureDetector, setState (제스쳐 인식하기)

안녕하세요~ totally 개발자입니다. 

 

GestureDetector

오늘 다뤄볼 내용은 GestureDetector 위젯입니다. 용어 그대로 제스쳐를 감지하는 기능을 가진 위젯이며 사용자의 제스쳐를 인식하기 위해 사용합니다. 이 GestureDetector를 사용할 때에는 인식하려는 범위에 따라 넣어주는 위치가 다르기 때문에 이 부분 주의하셔서 사용하시면 됩니다. 많이 사용하는 제스쳐 속성으로는 onTap이며 나머지 필요한 속성들은 여기에서 참고하시면 됩니다.

 

이 GestureDetector 위젯을 사용하여 버튼을 눌렀을 때, 밝은 배경을 어두운 배경으로, 어두운 배경을 밝은 배경으로 전환하는 기능을 만들어보도록 하겠습니다.

 

변수 선언 및 color 배치

먼저 9번째 줄의 bool isLightTheme = true; 이렇게 boolean 변수를 선언 해주고 기본값으로 true로 지정합니다. 그리고 13번째 줄처럼 Scaffold의 backgroundColor 속성을 사용하여 isLightTheme의 변수값이 true일 때 white 색상으로 isLightTheme의 변수값이 false일 때 black 색상(여기에서는 black87을 사용했는데 이 87의 뜻은 opacity(투명도)를 뜻합니다)을 넣어줍니다. 

 

 

GestureDetector 위젯

다음으로는 35번째 줄에 GestureDetector 위젯을 넣어주고, onTap 속성으로 사용자가 탭 했을 때 기능을 넣어줍니다. 함수 형태로 들어가며, 상태 업데이트를 notify하기 위해서 (새로고침한다고 보시면 됩니다) setState 메소드를 넣어주고 그 안에 변수값을 true인 경우 false로 false인 경우 true로 바꿔줍니다. setState를 사용하기 위해서는 StatefulWidget이여야 하며 StatelessWidget인 경우에는 사용하실 수 없습니다. 그리고 GestureDetector의 위치도 매우 중요합니다. 여기에서는 파란색 버튼이 제스쳐의 인식 범위이기 때문에 버튼 컨테이너의 바로 상단 노드에 GestureDetector를 넣어주면 됩니다. 만일 배경 전체가 제스쳐를 인식해야 하는 영역이라면 body: GestureDetector 형태로 진행해주셔야 합니다. 

 

 

버튼을 눌렀을 때 어두운 배경으로 전환되는 모습

버튼을 눌렀을 때, 어두운 배경으로 전환되는 모습을 확인할 수 있습니다. 이 GestureDetector와 setState의 조합을 통해 다양한 기능을 생성할 수 있으므로 반드시 이해하고 사용하는 것이 좋습니다.

 

[전체 소스 코드]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/O63NurH5p0Q

 

다음 시간에는 ListView에 대하여 알아보도록 하겠습니다. 감사합니다.