Colin's Blog
[flutter] cupertino_icons 패키지의 다양한 아이콘 예시

flutter에서 아이콘을 사용하기 위해 cupertino_icons 패키지를 사용할 수 있습니다. 이 패키지에는 iOS의 Cupertino 디자인 아이콘 세트를 제공하여 iOS 앱을 개발할 때 아이콘을 손쉽게 사용할 수 있도록 도와줍니다. 이 카테고리에서는 cupertino_icons 패키지의 다양한 아이콘 예시를 살펴보겠습니다.

설치하기

pubspec.yaml 파일에 아래와 같이 의존성을 추가하고 프로젝트를 업데이트해야 합니다.

dependencies:
  cupertino_icons: ^1.0.4

사용하기

import 'package:flutter/cupertino.dart';
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: 'Cupertino Icons 예시',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Icons 예시'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
          ),
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    CupertinoIcons.values[index],
                    size: 48.0,
                  ),
                  SizedBox(height: 8.0),
                  Text('${CupertinoIcons.values[index]}'),
                ],
              ),
            );
          },
          itemCount: CupertinoIcons.values.length,
        ),
      ),
    );
  }
}

위의 예시 코드에서는 GridView.builder를 사용하여 Cupertino Icons를 그리드 형태로 표시합니다. 각 아이콘은 Icon 위젯을 사용하여 표시되며, 아이콘 위에 해당하는 이름은 Text 위젯을 사용하여 표시됩니다.

이제 실제 디바이스나 에뮬레이터에서 앱을 실행하면 cupertino_icons 패키지의 다양한 아이콘을 확인할 수 있습니다.

아이콘 카테고리

cupertino_icons 패키지에는 다양한 아이콘 카테고리가 포함되어 있습니다. 주요 카테고리 몇 가지를 살펴보면:

이 외에도 많은 아이콘들이 존재하며, 자세한 내용은 CupertinoIcons 문서를 참조하세요.

Cupertino 디자인 아이콘을 사용하여 iOS 앱을 더욱 멋지게 만들어보세요!

© 2018 Colin. All rights reserved.