[flutter] cupertino_icons를 통해 제작한 아이콘을 앱에 적용하는 방법

플러터(Flutter)에서는 cupertino_icons 패키지를 사용하여 iOS 스타일의 아이콘을 쉽게 제작하고 앱에 적용할 수 있습니다. 이 패키지는 아이콘 폰트를 제공하며, Cupertino 디자인 시스템에 기반한 아이콘을 사용할 수 있습니다.

아래는 cupertino_icons 패키지를 사용하여 앱에 아이콘을 적용하는 방법입니다:

1. cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일에 아래와 같이 cupertino_icons 패키지를 추가해야 합니다:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

flutter packages get 명령어를 통해 패키지를 다운로드하고 의존성을 업데이트합니다.

2. 앱에 아이콘 적용하기

cupertino_icons 패키지를 추가한 후에는 앱에서 이를 사용할 수 있게 됩니다. 아래는 예시 코드입니다:

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(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Icon(
          CupertinoIcons.heart,
          size: 60,
          color: Colors.red,
        ),
      ),
    );
  }
}

위 예시 코드에서는 CupertinoIcons.heart를 사용하여 하트 아이콘을 적용하였습니다. Icon 위젯의 size 속성과 color 속성을 사용하여 크기와 색상을 조정할 수 있습니다.

3. 결과 확인하기

앱을 실행하면 앱바에는 ‘My App’ 제목이 나타나고 중앙에는 빨간색 하트 아이콘이 표시됩니다. 이렇게하여 cupertino_icons를 사용하여 제작한 아이콘을 앱에 적용할 수 있습니다.

더 많은 아이콘을 사용하려면 cupertino_icons 패키지의 문서를 참조하십시오.

사용하고자 하는 아이콘이 cupertino_icons 패키지에 포함되어 있지 않은 경우, 직접 이미지나 Svg 아이콘을 사용할 수도 있습니다. 이 경우에는 AssetImage 또는 SvgPicture 를 사용하여 아이콘을 로드하고 표시할 수 있습니다.

이제 cupertino_icons 패키지를 사용하여 앱에 아이콘을 적용하는 방법을 알게 되었습니다.