[019] 플러터 (Flutter) 배우기 - Icon (아이콘) + GestureDetector 적용

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

 

Icon

 

오늘 다룰 부분은 Icon, 아이콘을 표시하는 위젯으로 사용법이 매우 간단하고 쉽기 때문에 바로 예시로 들어가보도록 하겠습니다.

 

Icon 위젯 사용

14번째 줄을 보시면 AppBar 위젯에 leading 속성을 추가하고 Icon 위젯을 배치했습니다. Icon의 사용법은 어떤 아이콘을 사용할 것인지만 명시해주면 끝입니다. 

 

size와 color 추가

물론 size와 color를 추가하는 등 스타일을 적용할 수 있습니다. 

 

이 뒤로 가기 아이콘을 활용해서 이 아이콘을 눌렀을 때, 뒤로 가기 즉 종료하기 위한 팝업을 띄워보도록 하겠습니다.

먼저 AlertDialog 위젯을 별도로 분리해서 선언해줍니다 (아래 참고).

 

AlertDialog 생성

이미 AlertDialog를 다루었기 때문에 간단히 설명하면 title, actions의 속성만 넣고 actions 속성 안에 "예", "아니오" 버튼을 추가해서 이 버튼들을 눌렀을 때 액션이 발동될 수 있도록 GestureDetector로 만들어줍니다. 여기에서는 "아니오"의 액션만 구현했습니다. 

 

이 exitDialog를 호출합니다

위에서 선언한 exitDialog를 Icon 부모 위젯의 GestureDetector 안에 있는 onTap 속성을 이용하여 호출해줍니다. dialog를 보여주는 방법은 showDialog 메소드를 만든 다음, context, builder를 이용해서 이미 선언한 Dialog 위젯을 호출해주면 됩니다. 

 

뒤로 가기 버튼(아이콘)을 눌렀을 때 다음과 같이 적용되는 모습을 볼 수 있습니다. Icon은 주로 버튼처럼 액션을 수반하는 경우가 많기에 이렇게 실습을 진행해보았습니다. 전체 소스 코드를 아래 첨부하니 참고하셔서 도움이 되기를 바랍니다. 감사합니다.

 

[전체 소스 코드]