[flutter] 플러터 Drawer에서 메뉴 아이템을 어떻게 추가하고 관리할 수 있는가?

07 Dec 2023

flutter

플러터(Flutter) 앱에서 Drawer는 사이드 메뉴를 표시하는 데 사용되는 중요한 구성 요소입니다. Drawer에는 여러 메뉴 아이템을 추가하고 사용자의 상호 작용에 따라 이벤트를 처리할 수 있어야 합니다.

Drawer에 메뉴 아이템 추가하기

먼저, Scaffold 위젯을 사용하여 앱의 기본적인 레이아웃을 생성합니다.

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        // 메뉴 아이템들을 추가할 위치
      ],
    ),
  ),
  appBar: AppBar(
    title: Text("앱 제목"),
  ),
  body: Container(),
);

ListView 위젯을 사용하여 Drawer에 메뉴 아이템들을 추가합니다. 각 메뉴 아이템은 ListTile으로 구성됩니다.

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        ListTile(
          title: Text("메뉴 1"),
          onTap: () {
            // 메뉴 1을 클릭했을 때 수행할 동작
          },
        ),
        ListTile(
          title: Text("메뉴 2"),
          onTap: () {
            // 메뉴 2를 클릭했을 때 수행할 동작
          },
        ),
        // 추가적인 메뉴 아이템들
      ],
    ),
  ),
  appBar: AppBar(
    title: Text("앱 제목"),
  ),
  body: Container(),
);

Drawer 메뉴 아이템 관리하기

플러터 앱의 Drawer에서 메뉴 아이템을 동적으로 추가하거나 관리해야 할 수도 있습니다. 이를 위해 ListView.builder를 사용하면 됩니다.

ListView.builder를 사용하여 메뉴 아이템을 동적으로 추가합니다. 예를 들어, menuItems라는 리스트에 메뉴 아이템 데이터가 있다고 가정해보겠습니다.

List<String> menuItems = ["메뉴 1", "메뉴 2", "메뉴 3"];

Scaffold(
  drawer: Drawer(
    child: ListView.builder(
      itemCount: menuItems.length,
      itemBuilder: (context, index) => ListTile(
        title: Text(menuItems[index]),
        onTap: () {
          // 메뉴 아이템을 클릭했을 때 수행할 동작
        },
      ),
    ),
  ),
  appBar: AppBar(
    title: Text("앱 제목"),
  ),
  body: Container(),
);

메뉴 아이템을 동적으로 추가하거나 삭제하려면 menuItems 리스트를 조작하면 됩니다. 예를 들어, 메뉴 아이템을 추가하는 경우:

menuItems.add("새로운 메뉴");

setState(() {});

또는 메뉴 아이템을 제거하는 경우:

menuItems.removeAt(index);

setState(() {});

setState를 호출하여 화면을 다시 그리도록 해야 합니다.

이제, 플러터 Drawer에서 메뉴 아이템을 추가하고 관리하는 방법에 대해 알게 되었습니다. 메뉴 아이템을 추가할 때 마다 ListView를 다시 그리기 때문에 성능에도 유념해야 합니다.