Flutter에서는 쿠퍼티노(Cupertino) 디자인 아이콘을 사용하는데, 이 아이콘들은 크게 두 가지 상태를 가질 수 있습니다. 이 글에서는 cupertino_icons 패키지를 사용하여 아이콘의 상태를 변경하는 방법에 대해 알아보겠습니다.

cupertino_icons 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

패키지를 추가한 이후에는 flutter pub get 명령어를 통해 패키지를 설치해줍니다.

아이콘 상태 변경하기

이제 cupertino_icons 패키지를 사용하여 아이콘의 상태를 변경할 수 있습니다. 예를 들어, CupertinoIcons.play 아이콘을 사용한다고 가정해봅시다. 이 아이콘은 기본적으로 재생 상태를 나타내는데, 이를 일시정지 상태로 변경해보겠습니다.

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

class MyIconButton extends StatefulWidget {
  @override
  _MyIconButtonState createState() => _MyIconButtonState();
}

class _MyIconButtonState extends State<MyIconButton> {
  bool isPlaying = true;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(isPlaying ? CupertinoIcons.play : CupertinoIcons.pause),
      onPressed: () {
        setState(() {
          isPlaying = !isPlaying;
        });
      },
    );
  }
}

위의 코드는 MyIconButton 클래스를 정의하고, isPlaying 변수를 통해 재생/일시정지 상태를 관리하고 있습니다. IconButton 위젯의 icon 프로퍼티에는 삼항 연산자를 사용하여 아이콘의 상태에 따라 다른 아이콘을 표시하도록 설정했습니다.

또한, onPressed 이벤트 핸들러에서는 setState를 호출하여 isPlaying 변수의 상태를 반전시켜 화면을 다시 그리도록 합니다.

마무리

이제 cupertino_icons 패키지를 사용하여 Flutter 앱에서 아이콘의 상태를 변경하는 방법에 대해 알아보았습니다. 이를 활용하여 개발하면서 더 다채로운 사용자 경험을 제공할 수 있습니다. 자세한 내용은 cupertino_icons 패키지 설명서를 참고하시기 바랍니다.