본문 바로가기
프레임워크/Flutter

[Flutter]iconButton 소개 및 활용 방법, 예시코드있음

by 연어바케트 2024. 5. 7.
반응형

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를 조절 할 수도 있다. 

반응형

댓글