플러터에서 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에서 아이콘을 사용할 수 있습니다. 이 방법들을 활용하여 앱의 네비게이션 기능을 더욱 향상시킬 수 있습니다. 자세한 내용은 플러터 공식 문서를 참조하시기 바랍니다.