[flutter] 플러터 Drawer를 사용하여 앱 내 탐색 기록을 저장하는 방법은?

07 Dec 2023

flutter

Flutter에서 Drawer는 앱의 주요 탐색 메뉴를 제공하는데 사용되는 위젯입니다. 이 글에서는 Drawer를 사용하여 사용자의 탐색 기록을 저장하는 방법에 대해 알아보겠습니다.

1. SharedPreferences 사용하기

SharedPreferences는 Flutter에서 데이터를 안전하게 저장하는 데 사용되는 패키지입니다. Drawer를 사용하여 탐색 기록을 저장하기 위해 다음 단계를 따르세요.

1-1. 패키지 추가하기

먼저 shared_preferences 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가하세요.

dependencies:
  shared_preferences: ^2.0.12

프로젝트 루트 디렉토리에서 터미널을 열고 다음 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

1-2. Drawer 구성하기

Drawer를 구성하기 위해선 다음의 코드 조각을 참고하세요.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class CustomDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          // Drawer 메뉴 아이템들
        ],
      ),
    );
  }
}

1-3. 탐색 기록 저장하기

사용자가 탐색할 때마다 탐색 기록을 저장하고 싶다면, 다음의 코드 조각을 참고하세요.

void saveNavigationHistory(String routeName) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  
  List<String> history = prefs.getStringList('navigation_history') ?? [];
  history.add(routeName);
  
  await prefs.setStringList('navigation_history', history);
}

1-4. 탐색 기록 불러오기

이전 탐색 기록을 불러오려면 다음의 코드 조각을 사용하세요.

void loadNavigationHistory() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  
  List<String> history = prefs.getStringList('navigation_history') ?? [];
  // 기록을 사용하여 필요한 작업을 수행하세요.
}

위의 메소드들을 앱의 적절한 부분에서 호출하는 것을 잊지 마세요.

2. Provider 패턴 사용하기

provider 패키지를 사용하여 Drawer를 통해 탐색 기록을 저장하는 것은 다음 단계를 따릅니다.

2-1. 패키지 추가하기

먼저 provider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가하세요.

dependencies:
  provider: ^6.0.1

프로젝트 루트 디렉토리에서 터미널을 열고 다음 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

2-2. Drawer 구성하기

다음의 코드 조각을 참고하여 Drawer를 구성하세요.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CustomDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final navigationProvider = Provider.of<NavigationProvider>(context);
    
    return Drawer(
      child: ListView(
        children: [
          // Drawer 메뉴 아이템들
        ],
      ),
    );
  }
}

2-3. Provider 생성하기

NavigationProvider라는 Provider 클래스를 생성해야 합니다. 다음의 코드 조각을 참고하세요.

import 'package:flutter/material.dart';

class NavigationProvider extends ChangeNotifier {
  List<String> history = [];

  void addNavigation(String routeName) {
    history.add(routeName);
    notifyListeners();
  }
}

2-4. 탐색 기록 저장하기

다음의 코드 조각을 사용하여 탐색 기록을 저장하세요.

final navigationProvider = Provider.of<NavigationProvider>(context, listen: false);
navigationProvider.addNavigation(routeName);

2-5. 탐색 기록 불러오기

NavigationProvider를 사용하여 이전 탐색 기록을 불러올 수 있습니다.

final navigationProvider = Provider.of<NavigationProvider>(context);
List<String> history = navigationProvider.history;
// 기록을 사용하여 필요한 작업을 수행하세요.

이제 위의 코드를 이용하여 Drawer를 통해 탐색 기록을 저장하고 불러올 수 있습니다.

플러터 Drawer를 사용하여 앱 내 탐색 기록을 저장하는 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 개선하고 사용자가 앱을 보다 편리하게 탐색할 수 있습니다.

더 자세한 정보와 예제는 아래의 참고 자료들을 확인해보세요.