[flutter] cupertino_icons를 이용한 아이콘에 지문 인식 효과 추가하기

Flutter는 다양한 아이콘 디자인을 제공하는 cupertino_icons 패키지를 제공합니다. 이 패키지를 이용하여 아이콘을 사용할 때 지문 인식 효과를 추가하는 방법을 알아보겠습니다.

지문 인식 효과를 추가하기 위해서는 InkWell 위젯을 이용하여 아이콘을 감싸줍니다. InkWell 위젯은 터치 효과를 제공하며, 터치 시 물결 모양으로 확장됩니다.

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

그리고 Flutter 앱의 아이콘을 사용하기 위해 main.dart 파일에서 cupertino_icons 패키지를 import 해줍니다.

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

이제 원하는 아이콘에 지문 인식 효과를 추가해봅시다. 예를 들어, 홈 화면에 위치한 휴지통 아이콘에 지문 인식 효과를 추가하고 싶다면 다음과 같이 코드를 작성합니다.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            // 휴지통 아이콘을 클릭했을 때 수행할 동작
          },
          child: Icon(
            CupertinoIcons.trash,
            size: 60,
          ),
        ),
      ),
    );
  }
}

여기서 InkWellonTap 속성에 클릭 시 수행할 동작을 추가할 수 있습니다.

다음으로, 아이콘의 크기 및 스타일을 변경하고 싶다면 Icon 위젯의 속성을 수정하면 됩니다. 위의 예시에서는 size 속성을 사용하여 아이콘의 크기를 60으로 지정했습니다.

지문 인식 효과를 추가한 아이콘을 사용하기 위해 홈 화면에서 HomePage 위젯을 호출하면 됩니다.

이제 지문 인식 효과를 추가한 아이콘을 확인할 수 있습니다. Flutter의 cupertino_icons 패키지를 이용하여 여러 아이콘에 지문 인식 효과를 추가할 수 있습니다.


참고 문서: