[flutter] 플러터 Drawer에서 아이콘을 사용하는 방법은?

플러터에서 Drawer는 앱의 네비게이션 메뉴를 표시하는 데 사용되는 위젯입니다. 플러터 Drawer에서 아이콘을 사용하는 데는 다음과 같은 방법들이 있습니다:

  1. ListTile 위젯 사용: 가장 간단한 방법은 ListTile 위젯을 사용하여 Drawer의 각 메뉴에 아이콘을 추가하는 것입니다. ListTile 위젯의 leading 속성에 Icon 위젯을 추가하여 아이콘을 지정할 수 있습니다. 예를 들어, 다음 코드는 Drawer에 “홈” 메뉴와 아이콘을 추가하는 예입니다:

    Drawer(
      child: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.home),
            title: Text('홈'),
            onTap: () {
              // 홈 메뉴 클릭 시 실행될 동작
            },
          ),
          // 다른 메뉴들 추가
        ],
      ),
    )
    

    이 예에서 Icon(Icons.home)은 “home” 아이콘을 나타내며, 리스트 타일의 왼쪽에 배치됩니다.

  2. ListTiletrailing 속성 사용: leading 속성 외에도 ListTiletrailing 속성을 사용하여 아이콘을 추가할 수 있습니다. trailing 속성은 리스트 타일의 오른쪽에 배치됩니다. 예를 들어, “알림” 메뉴에 알림 개수를 표시하는 아이콘을 추가하려면 다음과 같이 할 수 있습니다:

    ListTile(
      leading: Icon(Icons.notifications),
      title: Text('알림'),
      trailing: Icon(Icons.notifications_active),
      onTap: () {
        // 알림 메뉴 클릭 시 실행될 동작
      },
    ),
    

    이 예에서 Icon(Icons.notifications_active)은 알림 개수를 표시하는 아이콘을 나타냅니다. 이 아이콘은 리스트 타일의 오른쪽에 배치됩니다.

  3. IconButton 위젯 사용: IconButton 위젯을 사용하여 아이콘에 대한 탭 동작을 직접 정의할 수도 있습니다. 예를 들어, Drawer 상단에 설정 아이콘을 추가하고, 이를 클릭할 때 설정 화면으로 이동하려면 다음과 같이 할 수 있습니다:

    Drawer(
      child: Column(
        children: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              // 설정 아이콘 클릭 시 실행될 동작
              // 설정 화면으로 이동하는 코드 추가
            },
          ),
          // 메뉴들 추가
        ],
      ),
    )
    

    이 예에서는 IconButton 위젯에 Icon(Icons.settings)을 사용하여 설정 아이콘을 표시하고, onPressed 콜백 함수에 설정 아이콘을 클릭할 때 실행할 동작을 정의합니다.

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