이번에는 Flutter 프레임워크에서 제공하는 cupertino_icons 패키지를 이용하여 아이콘에 버튼 효과를 추가하는 방법에 대해 알아보겠습니다. cupertino_icons 패키지는 iOS 스타일의 아이콘을 제공해주는 패키지로써, Flutter 앱에서 iOS 디자인을 구현할 때 유용하게 사용될 수 있습니다.

1. cupertino_icons 패키지 추가하기

먼저, cupertino_icons 패키지를 프로젝트에 추가해야합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음과 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

추가 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 받아주세요.

2. Icon에 버튼 효과 추가하기

이제, cupertino_icons 패키지를 이용하여 아이콘에 버튼 효과를 추가할 수 있습니다. 아래의 예제 코드를 참고해주세요.

import 'package:flutter/cupertino.dart';

class IconButtonWithEffect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoButton(
      onPressed: () {
        // 버튼이 클릭되었을 때의 동작
      },
      child: Icon(
        CupertinoIcons.heart,
        size: 30,
        color: CupertinoColors.systemRed,
      ),
    );
  }
}

위 코드에서는 CupertinoButton 위젯을 이용하여 버튼을 생성하고, CupertinoIcons에서 제공하는 아이콘 중 하나인 heart 아이콘을 사용하였습니다. onPressed 콜백을 통해 버튼이 클릭되었을 때의 동작을 설정할 수 있습니다. 또한, size와 color를 통해 아이콘의 크기와 색상을 설정할 수 있습니다.

3. 결과 확인하기

IconButtonWithEffect 위젯을 화면에 추가하고 실행해보면, CupertinoButton 위젯을 통해 아이콘에 버튼 효과가 추가된 것을 확인할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        child: Center(
          child: IconButtonWithEffect(),
        ),
      ),
    );
  }
}

위의 코드에서 CupertinoPageScaffold를 이용하여 앱의 기본 레이아웃을 설정하고, IconButtonWithEffect를 중앙에 배치해보았습니다.

이제 앱을 실행하고 버튼을 클릭해보면, 클릭 효과가 적용된 아이콘을 확인할 수 있습니다.

마무리

본 포스트에서는 Flutter에서 cupertino_icons 패키지를 이용하여 아이콘에 버튼 효과를 추가하는 방법을 알아보았습니다. cupertino_icons 패키지는 iOS 디자인을 구현하고자 할 때 유용하게 사용될 수 있으며, 아이콘에 버튼 효과를 추가함으로써 사용자와의 상호작용을 더욱 향상시킬 수 있습니다.

cupertino_icons 패키지에 대한 자세한 내용은 공식 문서를 참고해주세요.