[flutter] 플러터 Drawer에서 특정 아이템을 강조하는 방법은?

07 Dec 2023

flutter

Drawer 위젯은 플러터에서 네비게이션 패널을 생성하는 데 사용되는 위젯으로, 사용자가 앱 내에서 다른 화면 또는 기능에 접근하기 위해 드래그하여 열 수 있습니다. 보통 Drawer에는 여러 개의 메뉴 아이템이 포함되어 있고, 이 중에서 특정 아이템을 강조하고 싶을 때가 있습니다.

강조된 아이템은 사용자에게 현재 선택된 화면 또는 기능임을 시각적으로 나타내는 역할을 합니다. 이를 구현하는 가장 간단한 방법 중 하나는 ListTile 위젯의 selected 속성을 활용하는 것입니다.

다음은 강조된 아이템을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.home),
            title: Text('홈'),
            selected: true, // 해당 아이템을 강조
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('설정'),
            selected: false,
          ),
          ListTile(
            leading: Icon(Icons.notifications),
            title: Text('알림'),
            selected: false,
          ),
        ],
      ),
    );
  }
}

위의 예시에서는 ListTile 위젯에 selected 속성을 추가하여 첫 번째 아이템을 강조하고 있습니다. 이렇게 설정된 아이템은 시각적으로 강조되므로 사용자에게 현재 페이지를 알려줄 수 있습니다.

참고로, Drawer는 앱 바깥 부분을 탭하여 닫을 수 있으며, 아이템이 클릭되었을 때 필요한 동작을 구현하기 위해 onTap 콜백을 사용할 수도 있습니다.

위 코드를 참고하여 플러터의 Drawer에서 특정 아이템을 강조하는 기능을 구현해보세요.