Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 빠르고 효율적인 프레임워크입니다. Flutter를 사용하면 iOS와 Android 모두에서 동작하는 앱을 쉽게 개발할 수 있습니다.

이번 글에서는 Flutter의 cupertino_icons 패키지를 사용하여 아이콘의 멀티 태스킹 기능을 추가하는 방법에 대해 알아보겠습니다.

cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일에서 cupertino_icons 패키지를 추가해야 합니다. 아래의 코드를 dependencies 섹션에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

아이콘 추가하기

cupertino_icons 패키지를 추가했으니 이제 해당 패키지에서 제공하는 아이콘을 사용할 수 있습니다. 예를 들어, 뒤로 가기 아이콘을 추가해보겠습니다. 먼저, 해당 아이콘을 사용하기 위해 cupertino_icons 패키지를 import 합니다.

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

이제 아이콘을 추가하고 싶은 위젯의 코드에서 원하는 위치에 CupertinoIcons.back을 사용하여 아이콘을 추가할 수 있습니다. 예를 들어, AppBar 컴포넌트의 왼쪽에 뒤로 가기 아이콘을 추가하고 싶다면 아래와 같이 코드를 작성할 수 있습니다.

AppBar(
  leading: IconButton(
    icon: Icon(CupertinoIcons.back),
    onPressed: () {
      // 뒤로 가기 버튼 클릭 시 동작
    },
  ),
  //...
)

사용자 정의 아이콘 추가하기

만약 cupertino_icons 패키지에서 제공하는 아이콘 외에도 사용자 정의 아이콘을 추가하고 싶다면 어떻게 해야 할까요? 그럴 때는 pubspec.yaml 파일에 해당 아이콘 파일을 추가하여 사용할 수 있습니다.

1. 먼저, 사용자 정의 아이콘 파일을 만들어주세요. 예를 들어, my_icon.svg와 같은 이름의 SVG 파일을 만듭니다.

2. pubspec.yaml 파일의 flutter 섹션에 assets를 추가한 후, my_icon.svg 파일의 경로를 추가해주세요. 아래의 코드를 참고해주세요.

flutter:
  assets:
    - assets/my_icon.svg

1. 사용자 정의 아이콘을 위한 코드를 작성해주세요.

Icon(AssetImage('assets/my_icon.svg')),

마무리

이제 cupertino_icons 패키지를 사용하여 아이콘의 멀티 태스킹 기능을 추가하는 방법에 대해 알아보았습니다. cupertino_icons를 통해 iOS의 아이콘을 쉽게 추가할 수 있으며, 사용자 정의 아이콘을 추가하는 방법도 익힐 수 있습니다.

더 자세한 내용은 다음 참고 자료를 확인해보세요.

• cupertino_icons 패키지