[flutter] cupertino_icons를 사용하여 아이콘에 테마 디자인 기능 추가하기

30 Nov 2023

flutter

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, iOS 및 Android 앱을 동시에 개발할 수 있습니다. 플러터는 멀티 플랫폼 앱 개발에 특화되어 있으며, 다양한 기능과 장점을 제공합니다.

하나의 기능으로 앱의 모양과 느낌을 개선하는 방법은 아이콘을 사용하여 앱을 테마 디자인하는 것입니다. 이번 튜토리얼에서는 Cupertino Icons를 사용하여 플러터 앱에 아이콘을 추가하고 테마 디자인을 적용하는 방법을 알아보겠습니다.

Cupertino Icons란?

Cupertino Icons는 iOS의 아이콘 세트인 것으로 iOS 스타일의 아이콘을 플러터 앱에 사용할 수 있게 해줍니다. Flutter 패키지에 내장되어 있어서 별도의 설치 과정 없이 손쉽게 사용할 수 있습니다.

아이콘을 플러터 앱에 추가하기

Cupertino Icons를 사용하기 위해서는 먼저 해당 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 아래와 같이 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

의존성을 추가한 후에는 패키지를 가져올 수 있습니다. 다음과 같이 패키지를 가져오세요.

import 'package:flutter/cupertino.dart';

이제 아이콘을 사용해보겠습니다. 예를 들어, 네비게이션 바에 홈 아이콘을 추가해봅시다. 다음과 같이 코드를 작성하세요.

BottomNavigationBarItem(
  icon: Icon(CupertinoIcons.home),
  title: Text('Home'),
)

위 예제에서는 BottomNavigationBarItem 위젯을 사용하여 홈 아이콘을 추가하고 있습니다. icon 속성에 Icon 위젯을 사용하고, 그 안에 CupertinoIcons.home을 넣어 아이콘을 설정하였습니다.

아이콘 테마 적용하기

아이콘을 추가한 후에는 테마를 적용하여 앱의 디자인을 개선할 수 있습니다. 플러터에서 테마를 사용하려면 먼저 테마 데이터를 정의해야합니다.

CupertinoApp(
  theme: CupertinoThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
    textTheme: CupertinoTextThemeData(
      primaryColor: Colors.black,
    ),
  ),
  home: MyHomePage(),
)

위 예제에서는 CupertinoApp 위젯의 theme 속성을 사용하여 테마를 설정하고 있습니다. brightness, primaryColor, scaffoldBackgroundColor, textTheme 등 다양한 테마 속성을 사용할 수 있으며, 앱의 색상, 배경색, 텍스트 스타일 등을 조정할 수 있습니다.

마무리

이제 Flutter의 Cuperto Icons를 사용하여 아이콘을 추가하고 테마 디자인을 적용하는 방법을 알아보았습니다. 이를 통해 앱의 모양과 느낌을 개선하고 사용자 경험을 향상시킬 수 있습니다. 계속해서 Flutter의 다양한 기능과 플러그인을 탐색하고 공부하면서 앱을 더욱 완벽하게 개발해보세요.

Cupertino Icons란?

아이콘을 플러터 앱에 추가하기

아이콘 테마 적용하기

마무리

참고 자료