[flutter] 플러터 Drawer를 사용하여 로그아웃 기능을 구현하는 방법은?

07 Dec 2023

flutter

플러터 앱에서 사용자가 로그아웃할 수 있는 기능을 구현하기 위해서는 Drawer 위젯을 사용할 수 있습니다. Drawer는 앱의 왼쪽에 슬라이드되는 패널로, 일반적으로 앱의 메뉴 및 설정을 표시하는 데 사용됩니다.

이제 플러터 Drawer를 사용하여 로그아웃 기능을 구현하는 방법을 살펴보겠습니다.

1. Drawer 생성하기

먼저, Drawer를 생성하기 위해 Scaffold 위젯의 drawer 속성을 사용합니다. 이 속성에는 Drawer 위젯의 인스턴스를 할당해야 합니다.

Scaffold(
  drawer: Drawer(
    // Drawer 내부의 위젯들을 구성
  ),
  // 나머지 위젯들
)

2. Drawer 항목 추가하기

이제 Drawer 내부에 항목을 추가해보겠습니다. 주로 리스트 형식으로 표현이 됩니다.

Scaffold(
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        ListTile(
          title: Text('메뉴1'),
          onTap: () {
            // 메뉴1을 클릭했을 때 실행될 코드 작성
          },
        ),
        ListTile(
          title: Text('메뉴2'),
          onTap: () {
            // 메뉴2을 클릭했을 때 실행될 코드 작성
          },
        ),
        // 추가적인 항목들...
      ],
    ),
  ),
  // 나머지 위젯들
)

3. 로그아웃 항목 추가하기

이제 Drawer에 로그아웃 항목을 추가해보겠습니다. 해당 항목을 클릭했을 때 로그아웃 기능이 실행되도록 코드를 작성하겠습니다.

Scaffold(
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        // 메뉴 항목들...

        ListTile(
          title: Text('로그아웃'),
          onTap: () {
            // 로그아웃 기능 실행 코드 작성
            // 예: 로그아웃 API 호출, 토큰 삭제 등
          },
        ),
      ],
    ),
  ),
  // 나머지 위젯들
)

4. 로그아웃 기능 구현

마지막으로, 로그아웃 기능을 구현하기 위해 SharedPreferences 패키지를 사용하여 사용자 정보 및 토큰을 삭제하는 코드를 작성합니다.

import 'package:shared_preferences/shared_preferences.dart';

// 로그아웃 기능 실행 코드
void logout() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();

  // 사용자 정보 삭제
  prefs.remove('username');
  prefs.remove('email');

  // 토큰 삭제
  prefs.remove('token');

  // 기타 필요한 작업
}

// 로그아웃 항목 클릭 시 실행
onTap: () {
  logout();
  // 추가적으로 다른 페이지로 이동하거나 알림 메시지 등을 처리할 수 있습니다.
},

이제 플러터 Drawer를 사용하여 로그아웃 기능을 구현할 수 있습니다. 사용자가 로그아웃 항목을 클릭하면 해당 기능이 실행되며, 로그아웃 시 필요한 작업을 처리할 수도 있습니다.