주제 - Flutter에서 Id, Pw를 입력받아서 저장 (캐싱) 하기. -
어플을 종료해도 입력한 값을 기억하고 있는다.
필요한 패키지: shared_preferences
링크: https://pub.dev/packages/shared_preferences
shared_preferences | Flutter Package
Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android.
pub.dev
yami 파일에
|
1
2
|
dependencies:
shared_preferences: ^0.5.3+2
|
cs |
와 같이 의존성 추가를 해주자.
-아래는 결과물 소스코드이다.-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Page(),
);
}
}
class Page extends StatefulWidget {
@override
_PageState createState() => _PageState();
}
class _PageState extends State<Page> {
// 캐싱을 위한 선언
String _id = '';
String _pw = '';
SharedPreferences _prefs;
// 텍스트를 받아오기 위한 선언
final idController = TextEditingController();
final pwController = TextEditingController();
// 위젯이 생성될 때 처음으로 호출되고, 단 한번만 호출된다.
@override
void initState() {
super.initState(); // initState()를 사용할 때 반드시 사용해야 한다.
_loadId(); // 이 함수를 실행한다.
}
// 캐시에 있는 데이터를 불러오는 함수
// 이 함수의 기능으로, 어플을 끄고 켜도 데이터가 유지된다.
_loadId() async {
_prefs = await SharedPreferences.getInstance(); // 캐시에 저장되어있는 값을 불러온다.
setState(() { // 캐시에 저장된 값을 반영하여 현재 상태를 설정한다.
// SharedPreferences에 id, pw로 저장된 값을 읽어 필드에 저장. 없을 경우 0으로 대입
_id = (_prefs.getString('id') ?? '');
_pw = (_prefs.getString('pw') ?? '');
print(_id); // Run 기록으로 id와 pw의 값을 확인할 수 있음.
print(_pw);
});
}
//위젯 시작
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('아이디 비밀번호 캐시 테스트')
),
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(16, 30, 16, 0),
child: TextField(
controller: idController, // 여기서 입력받은 String값을 idController에 전달
decoration: new InputDecoration(
border: OutlineInputBorder(),
hintText: "Write your account",
),
),
),
Container(
margin: EdgeInsets.all(16.0),
child: TextField(
controller: pwController, // 여기서 입력받은 String값을 pwController에 전달
decoration: new InputDecoration(
border: OutlineInputBorder(),
hintText: "Write your password",
),
),
),
Container(
margin: EdgeInsets.fromLTRB(40, 20, 40, 40),
child: FloatingActionButton(
child: Icon(Icons.account_box),
onPressed: () {
_id = idController.text; // _id 에 입력받은 값 넣어줌
_pw = pwController.text; // _pw 에 입력받은 값 넣어줌
_prefs.setString('id', _id); // id를 키로 가지고 있는 값에 입력받은 _id를 넣어줌. = 캐시에 넣어줌
_prefs.setString('pw', _pw); // pw를 키로 가지고 있는 값에 입력받은 _pw를 넣어줌. = 캐시에 넣어줌
showDialog( // 버튼을 눌렀음을 확인시키기 위한 창 띄우기
context: context,
builder: (context) {
return AlertDialog(
content: Text(
'저장이 완료됐습니다.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
),
)
);
}
);
}
),
),
Text(
'아이디: $_id',
style: TextStyle(
fontWeight: FontWeight.w700
),
), // 어플을 재시작해도 데이터가 보존되는지 확인하기 위한 Text창
Text(
'$비밀번호: _pw',
style: TextStyle(
fontWeight: FontWeight.w700
),
),
],
),
);
}
}
|
cs |
1. 아이디와 비밀번호를 저장할 변수를 선언, . TextEditingController 인스턴스를 필드에 저장하자
이제 idController, pwController에 입력한 값을 받는다.
|
1
2
3
4
5
6
7
8
9
|
// 캐싱을 위한 선언
String _id = '';
String _pw = '';
SharedPreferences _prefs;
// 텍스트를 받아오기 위한 선언
final idController = TextEditingController();
final pwController = TextEditingController();
|
cs |
2. initState() 메소드를 선언한다. 이 메소드는 위젯이 만들어질 때 최초 단 한번만 실행되는 함수이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 위젯이 생성될 때 처음으로 호출되고, 단 한번만 호출된다.
@override
void initState() {
super.initState(); // initState()를 사용할 때 반드시 사용해야 한다.
_loadId(); // 이 함수를 실행한다.
}
// 캐시에 있는 데이터를 불러오는 함수
// 이 함수의 기능으로, 어플을 끄고 켜도 데이터가 유지된다.
_loadId() async {
_prefs = await SharedPreferences.getInstance(); // 캐시에 저장되어있는 값을 불러온다.
setState(() {
// SharedPreferences에 id, pw로 저장된 값을 읽어 필드에 저장. 없을 경우 0으로 대입
_id = (_prefs.getString('id') ?? '');
_pw = (_prefs.getString('pw') ?? '');
print(_id); // Run 기록으로 id와 pw의 값을 확인할 수 있음.
print(_pw);
});
}
|
cs |
3. 위젯 부터는 결과물 코드를 참고하도록 하자.
-여담-
여담.1 _prefs.get에서 사용가능한 data type들
- 본문 라인 no.51, 52를 보면 getString('id') 라는 코드가 있다. 캐시로부터 값을 가져와서 _id변수에 넣어준다는 뜻인데
값을 가져올 때 어떤 타입으로 가져오는지 정하는 것이다. 위와 같이
- get: 모든 타입을 다 가져올 수 있음.
- Int, Bool, Double: 각 타입으로 가져올 수 있음.
- Keys() : key값을 가져온다는건가? 이건 잘 모르겠음.
- String, StringList: 각 타입으로 가져올 수 있음.
와 같이 사용가능하다.
- getString을 했으니 setString도 알아보자. 캐시에 값을 넣어줄 때 사용하는 함수인데, 매개변수에 key, value 순서로 넣어준다. value에 넣어줄 값이 어떤 타입인지 정의하는 것이다. 입력할 때 구분하자.
'안드로이드 > Flutter' 카테고리의 다른 글
| How can I use Future in Flutter(Dart) (0) | 2020.04.22 |
|---|---|
| 플러터 캘린더를 한국어로 바꾸는 방법 (1) | 2020.04.20 |
| Flutter 코드 리팩토링 (0) | 2020.04.16 |
| 플러터 위젯 - 위치, 정렬, 크기를 위한 위젯 (0) | 2020.04.14 |
| 플러터 위젯 - 화면 배치에 쓰는 위젯(2) (0) | 2020.04.10 |
