[flutter] cupertino_icons를 이용한 아이콘 터치 효과 추가하기

Flutter는 다양한 아이콘을 제공하는 cupertino_icons 패키지를 제공합니다. 이 패키지를 활용하여 간단한 아이콘 터치 효과를 추가해보도록 하겠습니다.

1. cupertino_icons 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

패키지를 추가한 후에는 flutter pub get 명령어를 통해 패키지를 다운로드 받아주세요.

2. 아이콘 터치 효과 구현하기

이제 아이콘 터치 효과를 구현해보겠습니다. 다음은 IconButton 위젯을 사용하여 아이콘 터치 효과를 구현하는 예시 코드입니다.

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Touch Effect'),
        ),
        body: Center(
          child: IconButton(
            icon: Icon(CupertinoIcons.check_mark),
            onPressed: () {
              // 아이콘 터치 시 동작할 코드 작성
              print('Icon pressed!');
            },
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 IconButton 위젯을 사용하여 아이콘을 생성하고, onPressed 속성에 터치 했을 때 실행할 코드를 작성하였습니다. 해당 예시 코드에서는 아이콘을 터치할 때마다 ‘Icon pressed!’ 메시지가 출력됩니다.

3. 실행해보기

위의 코드를 작성한 후, Flutter 앱을 실행해보세요. 아이콘을 터치해보면 ‘Icon pressed!’ 메시지가 출력되는 것을 확인할 수 있습니다.

마무리

이번 글에서는 cupertino_icons 패키지를 활용하여 Flutter 앱에 아이콘 터치 효과를 추가하는 방법을 알아보았습니다. cupertino_icons 패키지는 다양한 아이콘을 제공하므로, 필요한 아이콘을 선택하여 앱에 적용해보세요.

더 많은 정보를 원하신다면 cupertino_icons 패키지 문서를 참고하세요.