[flutter] cupertino_icons를 사용하여 아이콘의 움직임을 묘사하는 방법

30 Nov 2023

flutter

Flutter에서는 cupertino_icons 패키지를 사용하여 iOS 디자인 시스템의 아이콘을 렌더링할 수 있습니다. 이 패키지를 사용하면 iOS 스타일의 아이콘을 Flutter 앱에서 쉽게 사용할 수 있습니다.

오늘은 cupertino_icons 패키지를 사용하여 아이콘의 움직임을 묘사하는 방법에 대해 알아보겠습니다.

1. `cupertino_icons` 패키지 추가

먼저, pubspec.yaml 파일을 열고 dependencies 섹션에 cupertino_icons를 추가해야 합니다. 아래와 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

변경 사항을 적용하기 위해 터미널에서 flutter pub get 명령어를 실행해 주세요.

2. 아이콘 사용하기

cupertino_icons 패키지의 아이콘은 CupertinoIcons 클래스를 사용하여 접근할 수 있습니다. 이 클래스는 iOS에서 제공하는 아이콘의 이름을 제공합니다.

예를 들어, 움직일 아이콘을 가진 Flutter 위젯을 만들어보겠습니다.

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

class MovingIconWidget extends StatefulWidget {
  @override
  _MovingIconWidgetState createState() => _MovingIconWidgetState();
}

class _MovingIconWidgetState extends State<MovingIconWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (BuildContext context, Widget child) {
        return Transform.rotate(
          angle: _animationController.value * 2 * 3.14,
          child: Icon(
            CupertinoIcons.refresh,
            size: 50.0,
          ),
        );
      },
    );
  }
}

위의 예제는 회전하는 아이콘을 나타내는 Flutter 위젯입니다. SingleTickerProviderStateMixin을 포함하는 _MovingIconWidgetState 클래스를 사용하여 애니메이션 컨트롤러를 초기화하고 회전 애니메이션을 구현합니다. build 함수에서 AnimatedBuilder 위젯을 사용하여 애니메이션을 생성하고 회전을 수행하는 동안 Transform.rotate를 사용하여 아이콘을 회전시킵니다.

3. 위젯 사용하기

위에서 생성한 MovingIconWidget을 다른 위젯에서 사용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Moving Icon',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Moving Icon'),
        ),
        body: Center(
          child: MovingIconWidget(),
        ),
      ),
    );
  }
}

위의 예제는 MovingIconWidget을 앱의 화면 중앙에 표시하는 간단한 앱입니다.

이제 앱을 실행하면 회전하는 아이콘이 화면 중앙에 표시됩니다.

위의 예제는 flutter와 cupertino_icons 패키지를 사용하여 아이콘의 움직임을 묘사하는 방법에 대해 알아보았습니다. 직접 코드를 작성하고 실행하여 결과를 확인해보세요!

더 많은 아이콘과 속성에 대한 정보는 CupertinoIcons 문서를 참조하십시오.

1. cupertino_icons 패키지 추가

2. 아이콘 사용하기

3. 위젯 사용하기

1. `cupertino_icons` 패키지 추가