Flutter에서는 다양한 아이콘을 사용할 수 있는 여러 패키지가 제공됩니다. 하나의 패키지인 cupertino_icons는 iOS 스타일의 아이콘을 제공하여 앱의 디자인을 더욱 멋지게 꾸밀 수 있습니다.

이번 포스트에서는 cupertino_icons 패키지를 사용하여 아이콘을 다른 위젯과 조합하는 방법을 알아보겠습니다.

1. cupertino_icons 패키지 추가하기

먼저, cupertino_icons 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음과 같이 cupertino_icons 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

변경 사항을 저장한 후, Terminal에서 다음 명령을 실행하여 패키지를 설치합니다:

flutter pub get

2. cupertino_icons 사용하기

cupertino_icons 패키지를 설치한 후, 이제 아이콘을 사용할 준비가 되었습니다. 아이콘을 다른 위젯과 조합하려면 Icon 위젯을 사용해야 합니다.

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('아이콘과 다른 위젯 조합하기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              CupertinoIcons.heart,
              size: 50,
              color: Colors.red,
            ),
            SizedBox(height: 20),
            Text(
              '좋아요!',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Icon 위젯을 사용하여 CupertinoIcons.heart 아이콘을 나타냅니다. 또한, Text 위젯을 사용하여 “좋아요!”라는 텍스트를 표시합니다.

Icon 위젯의 size 속성으로 아이콘의 크기를 조정하고, color 속성으로 아이콘의 색상을 변경할 수 있습니다.

3. 실행 결과 확인하기

위 코드를 실행하면 CupertinoIcons.heart 아이콘과 “좋아요!”라는 텍스트가 포함된 화면이 나타납니다.

아이콘은 CupertinoIcons의 다른 값으로 변경하여 원하는 아이콘을 사용할 수 있습니다. Flutter에서 제공하는 Icons 클래스의 아이콘과 함께 사용할 수도 있습니다.

아이콘과 다른 위젯을 조합하여 앱의 디자인을 더욱 멋지게 꾸밀 수 있으니, cupertino_icons 패키지를 사용하여 다양한 아이콘을 탐색해보세요!

참고 자료

• cupertino_icons 패키지
• Flutter 아이콘 가이드