【Flutter】データを読み書きする【shared_preferences】

Flutterのパッケージshared_preferencesを使ってデータを読み書きしたい！

概要

今回の記事では、Flutterのパッケージshared_preferencesを使ってデータを読み書きする手順を掲載する。

データの読み書きのフィードバックにトーストを表示するのにパッケージfluttertoastを使ってる。fluttertoastの使い方については下記の記事を参照。

仕様書

環境

• Android Studio Giraffe | 2023.2.1 Patch 2
• Flutter 3.19.6
• fluttertoast: 8.2.5
• shared_preferences: 2.2.3

手順書

インストール編とコード編の2部構成です。

インストール編

ターミナルでコマンドを実行するか

flutter pub add fluttertoast shared_preferences

pubspec.yamlのdependencies:に下記のような感じで追加して

dependencies:
  fluttertoast: ^8.2.5
  shared_preferences: ^2.2.3

ターミナルでflutter pub getする。

flutter pub get

コード編

WRITEをタップするとTextFieldの文字列を保存、READをタップすると保存してた文字列をTextFieldに読み込む例。

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const SharedPreferencesSample1()
      )
    )
  );
}

void write(String str) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('data', str);
  Fluttertoast.showToast(
    msg: "Write Data!",
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    timeInSecForIosWeb: 1,
    backgroundColor: Colors.pink,
    textColor: Colors.white,
    fontSize: 16.0,
  );
}

Future<String> read() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  Fluttertoast.showToast(
    msg: "Read Data!",
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    timeInSecForIosWeb: 1,
    backgroundColor: Colors.pink,
    textColor: Colors.white,
    fontSize: 16.0,
  );
  return prefs.getString('data') ?? '';
}

class SharedPreferencesSample1 extends StatelessWidget {
  SharedPreferencesSample1({super.key});

  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
                child: TextField(
                  controller: textEditingController,
                  maxLength: 100,
                  decoration: const InputDecoration(hintText: '100文字以内'),
                ),
              ),
              TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Colors.blue,
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                  ),
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                ),
                onPressed: () => write(textEditingController.text),
                child: const Padding(
                  padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  child: Text("WRITE",
                      style: TextStyle(fontSize: 16.0, color: Colors.white)),
                ),
              ),
              TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Colors.blue,
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                  ),
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                ),
                onPressed: () => {
                  read().then((result) {
                    textEditingController.text = result;
                  })
                },
                child: const Padding(
                  padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  child: Text("READ",
                      style: TextStyle(fontSize: 16.0, color: Colors.white)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

shared_preferencesを使ってデータを書き込むとOSによってそれぞれ下記に保存される。

プラットフォーム	例
Android	/data/data/<package_name>/shared_prefs/<package-name>_preferences.xml
iOS	Library/Preferences/<package_name>.plist
Linux	/home/<user-name>/.<application-name>/shared_preferences.json
macOS	/Users/<user-name>/Library/Preferences/<bundle-identifier>.plist
Web	LocalStorageAPI（ブラウザによる）
Windows	C:\Users\<user-name>\AppData\Roaming\<application-name>\shared_preferences.json

まとめ（感想文）

shared_preferencesを使って書き込んだデータは読み取り可能な状態でファイルで保存されてるので、機密データの保存には向いてない。
パスワードなどの機密データの読み書きにはパッケージflutter_secure_storageを使う。flutter_secure_storageの使い方については下記の記事を参照。

参考文献・引用

下記のサイトを参考にさせていただきました。ありがとうございました。