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,
),
),
),
);
}
}
여기서 InkWell
의 onTap
속성에 클릭 시 수행할 동작을 추가할 수 있습니다.
다음으로, 아이콘의 크기 및 스타일을 변경하고 싶다면 Icon
위젯의 속성을 수정하면 됩니다. 위의 예시에서는 size
속성을 사용하여 아이콘의 크기를 60으로 지정했습니다.
지문 인식 효과를 추가한 아이콘을 사용하기 위해 홈 화면에서 HomePage
위젯을 호출하면 됩니다.
이제 지문 인식 효과를 추가한 아이콘을 확인할 수 있습니다. Flutter의 cupertino_icons
패키지를 이용하여 여러 아이콘에 지문 인식 효과를 추가할 수 있습니다.
참고 문서: