플러터에서 Drawer는 앱의 네비게이션 메뉴를 표시하는 데 사용되는 위젯입니다. 플러터 Drawer에서 아이콘을 사용하는 데는 다음과 같은 방법들이 있습니다:
-
ListTile
위젯 사용: 가장 간단한 방법은ListTile
위젯을 사용하여 Drawer의 각 메뉴에 아이콘을 추가하는 것입니다.ListTile
위젯의leading
속성에Icon
위젯을 추가하여 아이콘을 지정할 수 있습니다. 예를 들어, 다음 코드는 Drawer에 “홈” 메뉴와 아이콘을 추가하는 예입니다:Drawer( child: ListView( children: [ ListTile( leading: Icon(Icons.home), title: Text('홈'), onTap: () { // 홈 메뉴 클릭 시 실행될 동작 }, ), // 다른 메뉴들 추가 ], ), )
이 예에서
Icon(Icons.home)
은 “home” 아이콘을 나타내며, 리스트 타일의 왼쪽에 배치됩니다. -
ListTile
의trailing
속성 사용:leading
속성 외에도ListTile
의trailing
속성을 사용하여 아이콘을 추가할 수 있습니다.trailing
속성은 리스트 타일의 오른쪽에 배치됩니다. 예를 들어, “알림” 메뉴에 알림 개수를 표시하는 아이콘을 추가하려면 다음과 같이 할 수 있습니다:ListTile( leading: Icon(Icons.notifications), title: Text('알림'), trailing: Icon(Icons.notifications_active), onTap: () { // 알림 메뉴 클릭 시 실행될 동작 }, ),
이 예에서
Icon(Icons.notifications_active)
은 알림 개수를 표시하는 아이콘을 나타냅니다. 이 아이콘은 리스트 타일의 오른쪽에 배치됩니다. -
IconButton
위젯 사용:IconButton
위젯을 사용하여 아이콘에 대한 탭 동작을 직접 정의할 수도 있습니다. 예를 들어, Drawer 상단에 설정 아이콘을 추가하고, 이를 클릭할 때 설정 화면으로 이동하려면 다음과 같이 할 수 있습니다:Drawer( child: Column( children: [ IconButton( icon: Icon(Icons.settings), onPressed: () { // 설정 아이콘 클릭 시 실행될 동작 // 설정 화면으로 이동하는 코드 추가 }, ), // 메뉴들 추가 ], ), )
이 예에서는
IconButton
위젯에Icon(Icons.settings)
을 사용하여 설정 아이콘을 표시하고,onPressed
콜백 함수에 설정 아이콘을 클릭할 때 실행할 동작을 정의합니다.
이렇게 하면 플러터 Drawer에서 아이콘을 사용할 수 있습니다. 이 방법들을 활용하여 앱의 네비게이션 기능을 더욱 향상시킬 수 있습니다. 자세한 내용은 플러터 공식 문서를 참조하시기 바랍니다.