[flutter] cupertino_icons를 이용한 아이콘의 좌표계 변경하기

30 Nov 2023

flutter

cupertino_icons는 Flutter에서 iOS 스타일의 아이콘을 사용할 수 있는 패키지입니다. 기본적으로 이 패키지를 이용하면 iOS 디자인 가이드에 따라 아이콘을 표시할 수 있습니다. 그러나 때로는 다른 좌표계(예: Material 디자인 가이드의 좌표계)에서 작업해야 할 때도 있습니다. 이때 cupertino_icons 패키지에서 제공하는 아이콘의 좌표계를 변경해야 합니다.

아이콘의 좌표계 변경하기

cupertino_icons 패키지를 사용하여 아이콘의 좌표계를 변경하려면 다음 단계를 따르세요:

프로젝트의 pubspec.yaml 파일을 엽니다.
dependencies 섹션에 cupertino_icons 패키지를 추가합니다:
```
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
```
참고: cupertino_icons 패키지의 버전은 앱에 필요한 버전에 따라 다를 수 있습니다.
pubspec.yaml 파일을 저장하고, 터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드합니다.
사용하려는 아이콘의 이름을 통해 해당 아이콘을 가져옵니다. 아이콘의 이름은 CupertinoIcons 클래스의 enum으로 정의되어 있습니다.
```
import 'package:flutter/cupertino.dart';
```
CupertinoIcons 클래스의 아이콘을 가져올 때 CupertinoIcons에 맞는 아이콘을 가져옵니다.
```
Icon(CupertinoIcons.home)
```
좌표계를 변경하려면 Icon 위젯을 Transform 위젯으로 감싸고, Transform 위젯의 transform 속성을 지정하여 좌표계를 변경합니다. 예를 들어, Material 디자인 가이드의 좌표계로 변경하려면 아이콘을 90도 회전시킬 수 있습니다.
```
Transform.rotate(
  angle: 90 * (3.14159265359 / 180),
  child: Icon(CupertinoIcons.home),
)
```

이제 cupertino_icons 패키지를 사용하여 아이콘의 좌표계를 변경할 수 있습니다. 좌표계 변경 후에는 플랫폼에 따라 다른 디자인 가이드를 사용하는 것에 주의하세요.

아이콘의 좌표계 변경하기

참고 자료