프레임워크/Flutter
[Flutter]iconButton 소개 및 활용 방법, 예시코드있음
연어바케트
2024. 5. 7. 23:55
반응형
iconButton 이란
IconButton은 사용자에게 시작적인 피드백을 제공하기 좋은 위젯이다.
인터페이스의 상호작용을 향상시키는 요소중 하나이다.
일반적으로는 앱 바에서 설정 메뉴를 열거나, 화면 내 다른 위젯과의 상호 작용을 위해 사용되고 있고,
앱을 만들다 보면 분명 사용하게 되는 위젯중 하나 이다.
기본구조
IconButton(
onPressed: () {},
icon: Icon(Icons.back_hand),
)
iconButton의 주요 매개변수
- icon : icon 위젯을 전달하여 iconButton이 보여줄 아이콘을 정의한다.
- onPressed : 사용자가 IconButton을 클릭했을 때, 실행할 콜백 함수를 정의한다.
- iconsize : 아이콘의 크기를 설정한다. 단위는 픽셀이다.
IconButton 사용시 주의 사항
- iconButton에는 onPressed 콜백이 필수다. 만약 onPressed에 빈 함수라고 제공해야한다.
- icon 위젯또한 필수 값이다. iconButton이기 때문에 icon이 필수적으로 들어간다.
사용예시
class IconButtonPage extends StatelessWidget {
const IconButtonPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.back_hand),
)
);
}
}
결과화면
IconSize 변경
iconSize를 조절 할 수도 있다.
반응형