[flutter] cupertino_icons를 통해 아이콘 툴팁 추가하기
Flutter는 iOS 스타일의 UI를 구성하는데 사용되는 많은 위젯들을 제공합니다. 그 중에서도 cupertino_icons 패키지는 iOS 스타일의 아이콘을 사용할 수 있게 도와줍니다. 이 패키지를 사용하여 Flutter 앱에 아이콘 툴팁을 추가하는 방법을 알아보겠습니다.
1. cupertino_icons 패키지 추가하기
먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 아래의 코드를 pubspec.yaml 파일의 dependencies 섹션에 추가해주세요:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.3
cupertino_icons 패키지가 추가되었으면, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드하고 프로젝트를 업데이트 해주세요.
2. 아이콘과 툴팁 생성하기
이제, cupertino_icons 패키지의 아이콘과 해당 아이콘에 연결된 툴팁을 생성할 수 있습니다.
import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
class IconTooltipDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Icon Tooltip Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(CupertinoIcons.phone),
onPressed: () {
// 아이콘을 눌렀을 때의 동작
},
tooltip: 'Phone', // 아이콘에 보여질 툴팁
),
SizedBox(height: 16),
IconButton(
icon: Icon(CupertinoIcons.mail),
onPressed: () {
// 아이콘을 눌렀을 때의 동작
},
tooltip: 'Mail', // 아이콘에 보여질 툴팁
),
],
),
),
);
}
}
위의 코드는 두 개의 아이콘과 각각에 대한 툴팁을 생성하는 예제입니다. IconButton 위젯을 사용하여 아이콘을 생성하고, tooltip 속성을 사용하여 툴팁을 설정할 수 있습니다.
3. 실행하기
이제 IconTooltipDemo 위젯을 실행하여 결과를 확인해보세요. 각 아이콘 위에 마우스를 올리면 툴팁이 나타날 것입니다.
위의 예제 코드를 참고하여 원하는 아이콘과 툴팁을 추가하고, 필요한 동작을 구현할 수 있습니다.
더 많은 아이콘과 사용 가능한 기능을 확인하려면 cupertino_icons 패키지의 공식 문서를 참고하세요.
Happy coding!