Skip to content

[Flutter] 使用 shared_preferences 套件儲存 App 資料

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

Read More

Tags:

Leave a Reply