[flutter] 플러터 Drawer에서 사용자의 행동에 따라 동적으로 메뉴를 변경하는 방법은?

07 Dec 2023

flutter

다음은 사용자의 행동에 따라 동적으로 메뉴를 변경하는 예시입니다.

import 'package:flutter/material.dart';

class MyDrawer extends StatefulWidget {
  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  bool isUserLoggedIn = false;

  void handleLogin() {
    setState(() {
      isUserLoggedIn = true;
    });
  }

  void handleLogout() {
    setState(() {
      isUserLoggedIn = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            child: Text('My App'),
          ),
          ListTile(
            title: Text('Home'),
            onTap: () {
              // Handle home menu item tap
            },
          ),
          if (isUserLoggedIn)
            ListTile(
              title: Text('Profile'),
              onTap: () {
                // Handle profile menu item tap
              },
            ),
          ListTile(
            title: Text(isUserLoggedIn ? 'Logout' : 'Login'),
            onTap: () {
              if (isUserLoggedIn) {
                handleLogout();
              } else {
                handleLogin();
              }
            },
          ),
        ],
      ),
    );
  }
}

위의 예시에서는 MyDrawer 위젯 내에서 isUserLoggedIn이라는 상태 변수를 사용합니다. 이 변수는 사용자가 로그인 상태인지를 나타내며, 로그인 및 로그아웃 핸들러인 handleLogin()과 handleLogout()을 통해 상태를 변경합니다.

build() 메소드에서 isUserLoggedIn 변수를 기반으로 Drawer의 메뉴를 조건부로 생성하므로, 사용자가 로그인하면 프로필 메뉴가 추가되고 로그아웃 메뉴가 변경됩니다.

메뉴 항목의 동작은 해당 onTap 이벤트 핸들러에서 처리합니다.

이러한 방식으로 사용자의 행동에 따라 동적으로 메뉴를 변경할 수 있습니다.

참고 자료: