[flutter] cupertino_icons를 사용하여 드로워 메뉴에 아이콘 추가하기
이번에는 Flutter 앱의 드로워 메뉴에 아이콘을 추가하는 방법에 대해서 알아보겠습니다. 아이콘을 추가하기 위해 ‘cupertino_icons’ 패키지를 사용할 것입니다.
1. cupertino_icons 패키지 추가하기
먼저, pubspec.yaml
파일을 열고 dependencies
섹션에 다음과 같이 ‘cupertino_icons’ 패키지를 추가해주세요:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
그리고 터미널을 열고 다음 명령어를 실행하여 패키지를 설치해주세요:
flutter packages get
2. 드로워 메뉴에 아이콘 추가하기
이제 드로워 메뉴에 아이콘을 추가할 준비가 되었습니다. 먼저 드로워 메뉴를 구현한 코드를 열어주세요. 이 코드는 Scaffold
위젯에서 drawer
속성을 설정하여 구현됩니다.
Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
// 드로워 메뉴 아이템
ListTile(
leading: Icon(CupertinoIcons.home),
title: Text('홈'),
onTap: () {
// 메뉴 아이템을 클릭했을 때 수행할 동작
},
),
ListTile(
leading: Icon(CupertinoIcons.person),
title: Text('프로필'),
onTap: () {
// 메뉴 아이템을 클릭했을 때 수행할 동작
},
),
// 추가적인 메뉴 아이템들...
],
),
),
// 나머지 위젯들...
)
드로워 메뉴의 각 아이템에는 leading
속성으로 아이콘을 추가할 수 있습니다. 여기서 CupertinoIcons
클래스를 이용하여 원하는 아이콘을 선택할 수 있습니다.
3. 아이콘 스타일 변경하기
만약 아이콘의 색상이나 크기를 변경하거나, 추가적인 스타일을 적용하고 싶다면 Icon
위젯의 속성을 조정하면 됩니다.
leading: Icon(
CupertinoIcons.person,
color: Colors.red, // 아이콘 색상 변경
size: 30, // 아이콘 크기 수정
),
이렇게하면 드로워 메뉴에서 사용할 아이콘을 추가하고 스타일을 변경할 수 있습니다. 이제 여러분은 Flutter 앱의 드로워 메뉴에 아이콘을 적용하는 방법을 알게 되었습니다.
더 자세한 정보를 원하신다면 Flutter 공식 문서를 참조해주세요.