[flutter] cupertino_icons 패키지를 사용하여 특정 아이콘 검색하기

30 Nov 2023

flutter

cupertino_icons 패키지는 iOS 디자인에 사용되는 Cupertino 아이콘을 제공하는 패키지입니다. 이 패키지를 사용하여 특정 아이콘의 이름을 찾는 방법에 대해 알아보겠습니다.

cupertino_icons 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

pubspec.yaml 파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

아이콘 검색하기

cupertino_icons 패키지를 추가한 후, Flutter에서 특정 아이콘의 이름을 찾는 방법은 다음과 같습니다.

CupertinoIcons 클래스의 정적 멤버인 아이콘을 직접 확인합니다.

import 'package:flutter/cupertino.dart';

void main() {
  print(CupertinoIcons.heart);
  print(CupertinoIcons.camera);
  print(CupertinoIcons.search);
  // 원하는 아이콘들의 이름을 출력해볼 수 있습니다.
}

카탈로그에서 cupertino_icons 패키지의 아이콘들을 확인합니다.
- https://pub.dev/packages/cupertino_icons

카탈로그에서 Search 기능을 이용하면 특정 아이콘의 이름을 검색할 수 있으며, 각 아이콘의 이름을 확인할 수 있습니다.

사용 예시

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('아이콘 검색 예시'),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                CupertinoIcons.heart,
                size: 100,
                color: Colors.red,
              ),
              SizedBox(height: 20),
              Text(
                'Flutter 아이콘',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예시는 CupertinoIcons.heart 아이콘을 사용하여 Flutter 앱에 하트 아이콘을 표시하는 예시입니다.

이렇게 하여 cupertino_icons 패키지를 사용하여 특정 아이콘을 검색하고 사용할 수 있습니다.

더 많은 아이콘들과 사용 예시는 CupertinoIcons 클래스의 문서를 참고하시기 바랍니다.