플러터 Icon 위젯 사용법 및 옵션 완벽 가이드

 

플러터에서 아이콘을 표시하는 데 가장 기본적인 위젯은 바로 Icon 위젯입니다.

Material Design에서 제공하는 다양한 기본 아이콘들을 사용하거나, SVG 파일을 사용하여 사용자 정의 아이콘을 만들 수 있습니다.

이 블로그 글에서는 Icon 위젯의 사용법과 주요 옵션들을 자세히 살펴보고, 실제 코드 예시와 함께 다양한 아이콘 표현을 구현해 보겠습니다.

 

1. 기본 사용법

 

Icon 위젯은 표시할 아이콘을 Icons 클래스의 상수로 전달합니다. 기본적으로 검은색 아이콘이 표시됩니다.

Icon(Icons.home),

 

2. 주요 옵션

 

Icon 위젯에는 다양한 옵션들이 존재하여 아이콘의 크기, 색상, 패딩 등을 조정할 수 있습니다. 주요 옵션들과 예시 코드는 다음과 같습니다.

• size: 아이콘 크기를 설정합니다.

  Icon(
    Icons.home,
    size: 32.0,
  ),
  

   
• color: 아이콘 색상을 설정합니다.
   

  Icon(
    Icons.home,
    color: Colors.red,
  ),
  

   
• semanticLabel: 시각 장애인을 위한 접근성을 위해 아이콘을 설명하는 텍스트를 설정합니다.
   

  Icon(
    Icons.home,
    semanticLabel: '홈 아이콘',
  ),
  

   

3. 사용자 정의 아이콘

 

SVG 파일을 사용하여 사용자 정의 아이콘을 만들 수 있습니다. AssetImage 위젯을 사용하여 SVG 파일을 로드하고, Image 위젯을 사용하여 아이콘을 표시합니다.

Image.asset('assets/icons/my_icon.svg', size: 32.0),

 

4. 다양한 아이콘 표현

 

위에서 소개한 옵션들을 활용하여 다양한 아이콘 표현을 구현할 수 있습니다. 

예를 들어, 다음과 같은 코드는 여러 개의 아이콘을 가로로 나열하는 레이아웃을 만듭니다.

Row(
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
    Icon(Icons.account_circle),
  ],
),

 

5. 팁

• 다양한 Material Design 아이콘들을 확인하려면 [https://fonts.google.com/icons] 를 참고하십시오.
• 사용자 정의 아이콘을 만들 때는 SVG 파일 형식을 사용하는 것이 좋습니다.
• 아이콘을 버튼과 함께 사용하여 사용자 상호 작용을 구현할 수 있습니다.

6. 마무리

 

플러터 Icon 위젯은 다양한 옵션과 기능들을 제공하여 간단한 아이콘 표현부터 복잡한 아이콘 레이아웃까지 자유롭게 구현할 수 있도록 지원합니다.

이 블로그 글을 통해 Icon 위젯에 대한 이해를 높이고, 실제 개발에 활용하시면 도움이 될 것입니다.