FlutterでSharedPreferencesを使ってローカルにデータを保存する

公開日：2019/11/20 更新日：2019/11/20

Photo by Hilthart Pedersen on Unsplash

はじめに

Flutterでちょっとしたデータをローカルに保存したい場合、Shared PreferencesというFlutter公式のプラグインを使用することで簡単に実現できます。例えばアプリに関する設定情報などのデータを保存したい場合に便利です。この記事ではFlutterのShared Preferencesを使ってアプリ内、ローカルにデータを保存する手順をまとめます。

できるようになること

Flutterで作成したアプリ内で、データを保存したり読み出したりできるようになります。この記事では、Shared preferencesの使い方と、Flutterのプロジェクト作成時にデフォルトで用意されるカウントアップアプリのカウント数を試しにShared preferencesを使ってローカルに保存、読み込むサンプルも載せます。ローカルのアプリ内に保存するので、アプリを閉じて再起動しても当然ながらカウントした値は残ります。

なお、Shared preferencesで保存できるデータはキーバリュー形式のみです。ただしリストなども保存できます。保存できるデータ型については後述します。

参考文献

以下の公式ドキュメントのコードを参考にさせて頂きました。

flutter.dev

Store key-value data on disk

If you have a relatively small collection of key-valuesto save, you can use the shared_preferences plugin.

また以下も大変参考にさせて頂きました。

qiita.com

Flutterで値を保存したり取り出したりする - Qiita

端末に簡単なデータを保存する際Flutterでは `SharedPreferences` で保存します。これは Key value方式での保存で、AndroidDevelop...

前提と環境

以下の通りです。

Flutter 1.9.1
Dart 2.5.0

Shared preferencesについて

Shared preferencesはどのようなデータでも保存できるわけはなく、保存できるデータの型は以下になります。

int型
double型
bool型
String型
String型のリスト

また、Shared preferencesはキーバリューストアであり、{ キー名: 値 }の形で保存します。SQLiteのようなデータベースを想定して使うものではないです。

Shared preferencesプラグインをインストールする

Shared preferencesを使えるようにするために、プラグインをインストールします。　なお、プラグインの最新バージョンはこちらの公式のプラグインページで確認してください。 pubspec.ymlのdependenciesに以下のように追記します。

pubspec.yml

# 省略
dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^0.5.4+5 # これを追記
# 省略

pubspec.ymlに追記したら上書き保存することでShared preferencesのプラグインがインストールされます。後はmain.dartやその他のファイルで以下のようにShared preferencesをインポートします。

main.dart

import 'package:shared_preferences/shared_preferences.dart'; // 追記する

これでShared preferencesプラグインのインストールは完了です。

Shared preferencesを使ってデータを読み書きする

Shared preferencesを使ってデータを読み込み、書き込みするには、データ型に応じて使用するメソッドを使い分けます。と言っても非常に簡単です。

Shared preferencesのインスタンスを取得する

まず基本として、はじめにShared preferencesのインスタンスを以下のように非同期で取得します。

final SharedPreferences prefs = await SharedPreferences.getInstance();

あとはこのprefsを使ってデータを書き込み、読み込みします。

int型のデータを読み書きする

int型のデータを保存するには、以下のようにsetIntを使用します。counterというのが適当なキー名です。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setInt('counter', 123);

読み込むには以下のようにgetIntを使用します。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getInt('counter') ?? 0;

上記の?? 0では、counterというキー名のデータがなければ代わりに0をセットしています。以降でもこの??を使ってデータがない時の初期値をセットします。

double型のデータを読み書きする

double型のデータを保存するには、以下のようにsetDoubleを使用します。counter_doubleというのが適当なキー名です。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setDouble('counter_double', 123.00);

読み込むには以下のようにgetDoubleを使用します。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getDouble('counter_double') ?? 0.0;

bool型のデータを読み書きする

bool型のデータを保存するには、以下のようにsetBoolを使用します。my_boolというのが適当なキー名です。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setBool('my_bool', true);

読み込むには以下のようにgetBoolを使用します。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getBool('my_bool') ?? false;

String型のデータを読み書きする

String型のデータを保存するには、以下のようにsetStringを使用します。my_stringというのが適当なキー名です。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('my_string', 'My String Data');

読み込むには以下のようにgetStringを使用します。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getString('my_string') ?? '';

String型のリストを読み書きする

String型のリストを保存するには、以下のようにsetStringListを使用します。my_string_listというのが適当なキー名です。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setStringList('my_string_list', ['apple', 'orange', 'grape']);

読み込むには以下のようにgetStringListを使用します。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getStringList('my_string_list') ?? [];

Shared preferencesのデータを削除する

削除する場合は型に関わらず以下のようにキー名を指定して削除することができます。

final SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.remove('counter');

FlutterカウントアップアプリでShared preferencesを使用するサンプル

Flutterプロジェクトを作成時にデフォルトで用意されるカウントアップアプリでShared preferencesを使った例を以下に載せます。以下は、カウントアップした値をShared preferencesに保存するため、アプリを終了して再起動しても当然ながらデータは保存されたままになります。以下のコードの説明は、コメントと前節までの内容と照らし合わせれば大体分かると思います。

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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() async {
    setState(() {
      _counter++;
      _setPrefItems();  // Shared Preferenceに値を保存する。
    });
  }

  // Shared Preferenceに値を保存されているデータを読み込んで_counterにセットする。
  _getPrefItems() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 以下の「counter」がキー名。見つからなければ０を返す
    setState(() {
      _counter = prefs.getInt('counter') ?? 0;
    });
  }

  // Shared Preferenceにデータを書き込む
  _setPrefItems() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 以下の「counter」がキー名。
    prefs.setInt('counter', _counter);
  }

  // Shared Preferenceのデータを削除する
  _removePrefItems() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    setState(() {
      _counter = 0;
      // 以下の「counter」がキー名。
      prefs.remove('counter');
    });
  }

  @override
  void initState() {
    super.initState();
    // 初期化時にShared Preferencesに保存している値を読み込む
    _getPrefItems();
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            RaisedButton(
              child: Text("削除する"),
              color: Colors.blue,
              onPressed: () => _removePrefItems(),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

まとめ

FlutterでShared preferencesを使ってローカルにデータを保存したり読み込んだりしたりする方法をまとめました。より多くのデータや複雑なデータはSQLiteやFirestoreなどを使う必要があるかもしれませんが、それほど大きなデータではなくシンプルなデータであれば十分使えそうです。