임시 저장 기능[Shared Preferences]

비교적 적은 양의 데이터를 내부기기에 저장할 때 쓰인다.

반영구적인 설정을 저장할 때 많이 쓰인다. 

사용예)

1.로그인 정보

2.다크모드

 

 

사용방법 

1. sharedPreferences 패키지 추가
1) pubspec.yaml을 연다.
2) shared_preferences: 를 dependencies:에 추가한다.
3) pub get한다.

2. SharedPreferences를 만들고 추가한다.

1) final SharedPreferences pref =await SharedPreferences.getInstance(); 선언한다
2) 데이터 저장할 때 .set(맞는 type).('이름', 값);ex) pref.setInt('number', 123);기기 내부에 123이 'number'라는 이름으로 저장된다.
3) 데이터 가져올 때 .get(맞는 type).('이름');ex) pref.getInt('number');기기 내부에 number라는 이름 안에 있는 데이터를 가져온다.

 

 

// shared preferences 얻기
final prefs = await SharedPreferences.getInstance();

// 값 저장하기
prefs.setInt('counter', counter);

 

final prefs = await SharedPreferences.getInstance();

// counter 키에 해당하는 데이터 읽기를 시도합니다. 만약 존재하지 않는 다면 0을 반환합니다.
final counter = prefs.getInt('counter') ?? 0;

 

final prefs = await SharedPreferences.getInstance();

prefs.remove('counter');

 

실 사용예 코드 

 

1) 로그인 정보 

출처 - getx_mysql_tutorial/user_pref.dart at mysql_login · icodingchef/getx_mysql_tutorial (github.com)

GitHub - icodingchef/getx_mysql_tutorial: mysql_signup

import 'dart:convert';

import '../model/user.dart';
import 'package:shared_preferences/shared_preferences.dart';

class RememberUser{
  static Future<void> saveRememberUserInfo(User userInfo) async{

    SharedPreferences preferences = await SharedPreferences.getInstance();
    String userJsonData = jsonEncode(userInfo.toJson());
    await preferences.setString("currentUser", userJsonData);

  }
}

2) 다크모드 

출처 : [Flutter] shared_preferences 와 provider로 라이트/다크모드 설정하기 (velog.io)

[Flutter] shared_preferences 와 provider로 라이트/다크모드 설정하기

- 앱이 실행되기전에 데이터가 도착을 해야 한다.  그래서 runApp 전에 코드를 작성한다. 

- 설정을 안해놨을경우 or 앱을 처음 키는 경우 =  null 을 이용해 기본값을 ligthtmode로 지정한다. 

- 설정된 값을 MyApp으로 넘겨준다. 

-SharedPreferences는 (key, value)로 데이터를 저장한다. , themeMode= key , [ ligth] or [dark] or [system] =value

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // shared_preferences 초기화.
  final prefs = await SharedPreferences.getInstance();
  
  // ThemeMode값 초기화. 기본값은 light로 정했습니다.
  ThemeMode themeMode = ThemeMode.light;
  
  // 저장된 테마모드 가져오기.
  final String? savedThemeMode = prefs.getString('themeMode');
  
  // 기존 themeMode 설정을 안해놨을 경우(null) 시작 테마를 light로 지정합니다.
  // savedThemeMode가 null이 아닐 경우 저장된 테마모드에 따라 themeMode를 설정합니다.
  if (savedThemeMode == null) {
    themeMode = ThemeMode.light;
  } else if (savedThemeMode == "light") {
    themeMode = ThemeMode.light;
  } else if (savedThemeMode == "dark") {
    themeMode = ThemeMode.dark;
  } else if (savedThemeMode == "system") {
    themeMode = ThemeMode.system;
  }
  
  // 설정된, 또는 불러온 테마모드를 MyApp에 넘겨줍니다.
  runApp(MyApp(themeMode: themeMode));
}

class MyApp extends StatelessWidget {
  // 테마모드를 ThemeProvider에 넘겨주기 위해 main() 함수로부터 themeMode 파라미터를 받습니다.
  final themeMode;
  const MyApp({
    Key? key,
    required this.themeMode,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
  	// Provider 사용.
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
        	// 어플리케이션이 실행되면서 Provider를 적용할 때 불러온 테마모드를 ThemeProvider에 넘겨줍니다.
            create: (_) => ThemeProvider(initThemeMode: themeMode)),
      ],
      builder: (context, _) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Petmily',
          // lib/theme.dart 에서 작성한 테마를 사용합니다.
          theme: MyThemes.lightTheme,
          darkTheme: MyThemes.darkTheme,
          
     	  // ThemeProvider에서 현재 테마 모드를 불러옵니다.
          themeMode: Provider.of<ThemeProvider>(context).themeMode,
          home: Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  MaterialButton(
                    onPressed: () {
                      // 이제 Provider를 통해 다른 위젯에서도 ThemeProvider를 호출하여 현재 테마 모드를 확인하거나 설정할 수 있습니다.
                      final themeProvider =
                          Provider.of<ThemeProvider>(context, listen: false);
                      themeProvider.setThemeMode(ThemeMode.light);
                    },
                    child: const Text("ligth"),
                  ),
                  MaterialButton(
                    onPressed: () {
                      final themeProvider =
                          Provider.of<ThemeProvider>(context, listen: false);
                      themeProvider.setThemeMode(ThemeMode.dark);
                    },
                    child: const Text("dark"),
                  ),
                  MaterialButton(
                    onPressed: () {
                      final themeProvider =
                          Provider.of<ThemeProvider>(context, listen: false);
                      themeProvider.setThemeMode(ThemeMode.system);
                    },
                    child: const Text("system"),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}