[flutter] cupertino_icons를 사용하여 드로워 메뉴에 아이콘 추가하기

30 Nov 2023

flutter

이번에는 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 공식 문서를 참조해주세요.