Last Updated on 2021-10-12 by Clay
開發 App 的過程中，總難免會有需要將 App 中使用者的資料儲存下來的時候，不論是 App 的參數設定、亦或者是上次使用者最後一次使用的配置......等等。
當然，如果我們要開發一個專門用於紀錄的 APP，比方說記帳用的 APP，那麼我們就還是得去設定 SQLite 或是其他資料庫來完成這項工作。
但反過來說，若只是要儲存使用者設定、或使用者最後一次使用的配置，直接建立一個 SQLite 資料庫似乎有點小題大作。當然不是不行，只是我們可以使用更簡單的方式來做到這件事。
今天我要紀錄的，就是在 Flutter 上十分著名的持久化儲存套件 shared_preferences。
這個套件封裝了 Android 平台的 SharedPreferences、iOS 以及 macOS 上的 NSUserDefaults，讓我們在 Flutter 上只需要使用這個套件便能同時完成 Android/iOS 不同平台上的資料儲存。
準備工作
首先，我們需要在 pubspec.yaml 這份檔案中添加我們所需要使用的套件名稱 shared_preferences。這樣一來我們才能取得該套件。
別忘了使用 flutter pub get 來取得套件。
程式說明
在程式的開頭，別忘了匯入 'package:shared_preferences/shared_preferences.dart'。
然後，由於 shared_preferences 套件的儲存方式是 key-value （鍵-值）的資料形式，於是我們需要設定儲存資料的 key 以及 value。也就是我在 _HomePageState 類別中的變數 key 及 value。
然後我建立了個『文字顯示欄位』以及『輸入欄位』，再加上一個按鈕。每當按下按鈕時，便將『輸入欄位』中的字串賦值給『文字顯示欄位』以及最重要的『SharedPreferences』物件，並更新儲存值。
每次行動裝置開啟此 App 時，同時也會載入 SharedPreferences 的資料，好確認最後儲存的資料。
詳細程式碼跟 demo 結果請看下方。
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Init
String key = "show";
String value = "Nothing";
TextEditingController controller = TextEditingController();
void initState() {
super.initState();
_loadData();
}
_loadData() async {
SharedPreferences sp = await SharedPreferences.getInstance();
setState(() {
value = (sp.getString(key) ?? "Nothing");
});
}
_updateData() async {
SharedPreferences sp = await SharedPreferences.getInstance();
setState(() {
sp.setString(key, controller.text);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Your message: ${value}"),
// Input box
TextField(
autofocus: true,
controller: controller,
decoration: InputDecoration(
labelText: "You can enter any string",
hintText: "Your message",
),
)
],
),
),
// Button
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
value = controller.text;
_updateData();
});
},
child: Icon(Icons.arrow_back),
),
);
}
}
Output:
References
- https://pub.dev/packages/shared_preferences
- https://medium.com/flutterdevs/using-sharedpreferences-in-flutter-251755f07127
- https://flutter.dev/docs/cookbook/persistence/key-value