Flutter는 다양한 아이콘을 제공하는 cupertino_icons 패키지를 포함하고 있습니다. cupertino_icons 패키지를 사용하면 iOS 스타일의 아이콘을 손쉽게 활용할 수 있습니다. 이번에는 아이콘에 회전 효과를 추가하는 방법을 알아보겠습니다.

1. cupertino_icons 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

변경 사항을 저장한 후, 패키지를 가져와야 합니다. 터미널에서 다음 명령을 실행합니다.

flutter pub get

2. 아이콘에 회전 효과 추가하기

이제 아이콘에 회전 효과를 추가할 준비가 되었습니다. Transform.rotate 위젯을 사용하여 아이콘을 회전시킬 수 있습니다. 아래 코드 예시에서는 Transform.rotate 위젯을 Icon 위젯의 상위에 배치하여 회전 효과를 적용합니다.

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: 'Icon Rotation',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Rotation'),
        ),
        body: Center(
          child: Transform.rotate(
            angle: 0.5, // 회전 각도 지정
            child: Icon(
              CupertinoIcons.arrow_right, // 회전시킬 아이콘 선택
              size: 50.0,
            ),
          ),
        ),
      ),
    );
  }
}

Transform.rotate 위젯의 angle 속성에 원하는 각도를 지정하여 아이콘을 회전시킬 수 있습니다. 위 예시에서는 0.5 라디안(약 28.65도)만큼 회전시켰습니다.

3. 실행해보기

위 예시 코드를 실행해보면 아이콘이 지정한 각도만큼 회전되어 나타납니다. 필요한 경우 angle 속성을 변경하여 원하는 회전 효과를 적용할 수 있습니다.

회전 효과를 추가하여 앱의 아이콘이 더욱 동적이고 흥미로워질 수 있습니다. cupertino_icons 패키지를 활용하여 iOS 스타일의 아이콘을 쉽게 사용하고, Transform.rotate 위젯을 통해 회전 효과를 적용하는 방법을 알아봤습니다.

참고 링크:

• cupertino_icons 패키지
• Transform.rotate 위젯