플러터에서 아이콘 위젯 사용 방법 및 옵션 완벽 가이드

 

플러터에서 아이콘 위젯은 간단하지만 강력한 도구로, 사용자 인터페이스에 아이콘을 추가하고 기능을 연결하는 데 사용됩니다.

이 블로그 게시물에서는 Flutter에서 아이콘 위젯을 사용하는 방법과 다양한 옵션에 대해 자세히 살펴보겠습니다.

1. 아이콘 위젯 소개

Icon 위젯은 다양한 종류의 아이콘을 표시하는 데 사용됩니다.

Material Design 아이콘, FontAwesome 아이콘, 커스텀 아이콘 등을 포함하여 다양한 아이콘 세트를 사용할 수 있습니다.

 

기본 사용법

Icon(
  Icons.add, // 아이콘 종류 지정 (예: Icons.add, Icons.home)
  size: 24.0, // 아이콘 크기 설정
  color: Colors.blue, // 아이콘 색상 설정
)

 

옵션

• icon: 표시할 아이콘을 지정합니다.
• size: 아이콘의 크기를 설정합니다.
• color: 아이콘의 색상을 설정합니다.
• semanticLabel: 음성 지원 기능을 위해 아이콘을 설명하는 레이블을 설정합니다.
• textDirection: 아이콘의 텍스트 방향을 설정합니다.

2. IconButton 위젯 소개

IconButton 위젯은 아이콘과 버튼 기능을 결합하여 사용자 터치에 반응하는 버튼을 만드는 데 사용됩니다.

 

기본 사용법

IconButton(
  icon: Icon(Icons.add), // 아이콘 설정 (위와 동일)
  onPressed: () {
    // 버튼 클릭 시 수행할 작업
    print('IconButton 클릭됨');
  },
)

 

옵션

• icon: 표시할 아이콘을 지정합니다.
• onPressed: 버튼 클릭 시 호출되는 콜백 함수를 설정합니다.
• size: 아이콘의 크기를 설정합니다.
• color: 아이콘의 색상을 설정합니다.
• padding: 버튼 주변의 여백을 설정합니다.
• splashColor: 버튼을 누를 때 표시되는 물결 효과의 색상을 설정합니다.
• tooltip: 버튼 위에 마우스를 올리면 표시되는 툴팁 텍스트를 설정합니다.

3. 아이콘 위젯 사용 사례

• 앱 바에 아이콘 추가: 앱 바에 메뉴, 검색, 홈 버튼 등을 추가하는 데 사용할 수 있습니다.
• 리스트 항목에 아이콘 추가: 리스트 항목에 확인 표시, 편집 버튼, 삭제 버튼 등을 추가하는 데 사용할 수 있습니다.
• 버튼에 아이콘 추가: 버튼에 아이콘을 추가하여 버튼의 기능을 시각적으로 나타낼 수 있습니다.
• 로딩 표시: 로딩 표시 아이콘을 사용하여 사용자에게 작업 진행 상황을 알릴 수 있습니다.

4. 아이콘 사용 팁

• Material Design 아이콘 사용: Flutter는 다양한 Material Design 아이콘을 제공합니다. https://api.flutter.dev/flutter/material/Icons-class.html 에서 사용 가능한 아이콘을 확인할 수 있습니다.
• 커스텀 아이콘 사용: SVG, PNG 또는 기타 이미지 파일을 사용하여 커스텀 아이콘을 만들 수 있습니다.
• 아이콘 크기 조정: size 속성을 사용하여 아이콘의 크기를 조정할 수 있습니다.
• 아이콘 색상 변경: color 속성을 사용하여 아이콘의 색상을 변경할 수 있습니다.
• 아이콘 패키지 사용: FontAwesome, Font Awesome Flutter 등 다양한 아이콘 패키지를 사용할 수 있습니다.

5. 마무리

플러터에서 아이콘 위젯은 사용자 인터페이스를 풍부하고 매력적으로 만들 수 있는 강력한 도구입니다.

다양한 아이콘과 옵션을 활용하여 앱에 적합한 아이콘을 선택하고 사용하십시오.