[flutter] 플러터 Drawer에서 서브메뉴를 추가하는 방법은?

07 Dec 2023

flutter

플러터에서 Drawer에 서브메뉴를 추가하는 방법은 간단합니다. Drawer는 주로 앱의 네비게이션 메뉴에 사용되며, 사용자가 각 항목을 탭할 때 해당 화면으로 이동할 수 있도록 합니다. 서브메뉴를 추가하면 더 많은 항목을 효과적으로 구성할 수 있습니다.

다음은 플러터에서 Drawer에 서브메뉴를 추가하는 방법입니다.

먼저, Scaffold 위젯에서 Drawer 속성을 추가하고 Drawer 위젯을 만듭니다. Drawer 위젯 안에는 ListView 위젯을 사용하여 메뉴 항목을 추가할 수 있습니다.

Scaffold(
  appBar: AppBar(
    title: Text('Flutter App'),
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        ListTile(
          title: Text('메뉴 1'),
          onTap: () {
            // 메뉴 1을 탭했을 때 수행할 동작
          },
        ),
        ListTile(
          title: Text('메뉴 2'),
          onTap: () {
            // 메뉴 2을 탭했을 때 수행할 동작
          },
        ),
        ExpansionTile(
          title: Text('서브메뉴'),
          children: [
            ListTile(
              title: Text('서브메뉴 1'),
              onTap: () {
                // 서브메뉴 1을 탭했을 때 수행할 동작
              },
            ),
            ListTile(
              title: Text('서브메뉴 2'),
              onTap: () {
                // 서브메뉴 2을 탭했을 때 수행할 동작
              },
            ),
          ],
        ),
      ],
    ),
  ),
  body: Container(
    // 앱의 본문 내용
  ),
);

ListView 위젯 안에 ListTile을 추가하여 각 메뉴 항목을 정의합니다. ListTile 위젯은 기본 메뉴 항목을 나타내며, title 속성을 사용하여 항목의 텍스트를 설정할 수 있습니다. onTap 속성을 사용하여 사용자가 항목을 탭했을 때 수행할 동작을 정의할 수 있습니다.
추가적으로 서브메뉴를 만들기 위해서는 ExpansionTile 위젯을 사용합니다. ExpansionTile은 확장 가능한 메뉴 항목을 나타냅니다. title 속성은 확장 가능한 항목의 텍스트를 설정하고, children 속성에는 서브메뉴로 사용할 ListTile을 추가합니다.

이렇게하면 플러터 앱의 Drawer에 서브메뉴를 추가할 수 있습니다. 서브메뉴를 활용하여 보다 구성된 네비게이션 메뉴를 만들어 사용자 경험을 개선할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참조하세요.