Flutter는 iOS 디자인 언어를 따르는 Cupertino 스타일 아이콘을 표시하기 위해 cupertino_icons 패키지를 제공합니다. 하지만, cupertino_icons 패키지에서 제공하는 아이콘은 기본적으로 흰색으로 렌더링됩니다. 사용자가 원하는 컬러로 아이콘을 변경하고 싶을 때는 어떻게 해야 할까요? 이 글에서는 cupertino_icons 패키지에서 아이콘 컬러를 변경하는 방법을 알려드리겠습니다.
1. 아이콘 컬러 변경하기
아이콘의 컬러를 변경하려면 아래와 같은 방법을 사용할 수 있습니다.
Step 1: 먼저, cupertino_icons 패키지를 pubspec.yaml 파일에 추가하세요.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.3
Step 2: pubspec.yaml 파일에 변경된 내용을 적용하기 위해 터미널에서 flutter pub get 명령을 실행하세요.
Step 3: 이제 코드에서 아이콘을 컬러링할 수 있습니다. 아이콘을 표시하는 위젯에 color 속성을 추가하고 원하는 컬러를 지정하세요.
import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
class MyIconWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Icon(
CupertinoIcons.heart,
color: Colors.red, // 컬러 변경
size: 24.0,
);
}
}
위의 코드에서는 CupertinoIcons.heart 아이콘의 컬러를 빨간색으로 변경하고 있습니다. color 속성에 다른 색상을 지정하면 원하는 컬러로 아이콘을 변경할 수 있습니다.
2. 컬러 테마 사용하기
만약 앱 전반에 걸쳐 일관된 아이콘 컬러를 사용하고 싶다면, 테마를 사용하는 것이 좋습니다. Flutter의 테마는 앱 전체에서 사용되는 일련의 스타일과 속성을 정의합니다.
Step 1: MaterialApp 위젯에서 theme 속성을 추가하세요.
import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
cupertinoOverrideTheme: CupertinoThemeData(
primaryColor: Colors.blue, // 아이콘 컬러 변경
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cupertino Icons'),
),
body: Center(
child: Icon(
CupertinoIcons.heart,
size: 24.0,
),
),
);
}
}
위의 코드에서는 cupertinoOverrideTheme 속성을 사용하여 전체 테마에서 아이콘 컬러를 변경하고 있습니다. primaryColor 속성에 다른 색상을 지정하면 전체 앱에서 CupertinoIcons의 아이콘 컬러가 변경됩니다.
결론
이 글에서는 cupertino_icons 패키지에서 아이콘 컬러를 변경하는 방법에 대해 알아보았습니다. color 속성을 사용하여 각 아이콘에 대해 개별적으로 컬러를 지정하거나, 테마를 사용하여 전체 앱에서 일관된 아이콘 컬러를 설정할 수 있습니다. Flutter에서 cupertino_icons 패키지를 사용하여 아이콘을 커스터마이징해보세요!