Flutter에서는 cupertino_icons 패키지를 사용하여 iOS 스타일의 아이콘을 사용할 수 있습니다. 이 패키지를 사용하면 iOS 디자인 가이드에 맞게 아이콘을 쉽게 추가할 수 있습니다. 때로는 이 아이콘들의 색상을 조정해야 할 수도 있습니다. 이 글에서는 cupertino_icons를 사용하여 아이콘의 색상을 조정하는 방법을 알아보겠습니다.

1. cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 cupertino_icons: ^1.0.2를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  
  cupertino_icons: ^1.0.2

그리고 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 받습니다.

2. 아이콘의 색상 조정하기

iOS 스타일 아이콘은 기본적으로 단색 아이콘입니다. 색상을 조정하기 위해서는 Icon 위젯의 color 속성을 사용하면 됩니다.

import 'package:flutter/cupertino.dart';

class MyIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(
      CupertinoIcons.heart,
      color: CupertinoColors.blue, // 아이콘의 색상을 파란색으로 변경
    );
  }
}

이 예시에서는 CupertinoIcons.heart 아이콘을 파란색으로 변경하였습니다. CupertinoColors 클래스는 미리 정의된 몇 가지 색상을 제공하므로, 사용하고자 하는 색상을 선택할 수 있습니다.

3. 추가적인 색상 조정 방법

cupertino_icons 패키지에서 제공하는 아이콘의 색상을 변경하는 방법 이외에도 추가적인 색상 조정 방법이 있습니다. 일부 아이콘은 foregroundColor 속성을 사용하여 전경색을 변경할 수 있습니다. 예를 들어, CupertinoActivityIndicator 위젯에서는 다음과 같이 foregroundColor 속성을 사용하여 주황색으로 변경할 수 있습니다.

import 'package:flutter/cupertino.dart';

class MyActivityIndicator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoActivityIndicator(
      radius: 20.0,
      animating: true,
      foregroundColor: CupertinoColors.orange, // 아이콘의 전경색을 주황색으로 변경
    );
  }
}

위의 예제에서는 CupertinoActivityIndicator 위젯의 전경색을 주황색으로 변경하였습니다.

마무리

위에서는 cupertino_icons 패키지를 사용하여 Flutter에서 iOS 스타일의 아이콘을 사용하고, 이 아이콘들의 색상을 조정하는 방법에 대해 알아보았습니다. 이를 통해 Flutter 애플리케이션에서 iOS 디자인 가이드에 맞게 아이콘을 사용할 수 있습니다.

• cupertino_icons 패키지
• CupertinoIcons 클래스
• CupertinoColors 클래스