その他

【Flutter】shared_preferencesでデータを永続化する

この記事は約5分で読めます。

はじめに

shared_preferencesを使ってデータをローカルに保存する

実行環境

今回は以下の環境で実装していきます。

  • Flutter:3.24.4
  • shared_preferences:2.2.2

shared_preferencesとは

shared_preferencesについて

shared_preferencesは単純なデータをローカルに保存することができるプラグインです。アプリ内でのダークモードの切替、文字の大きさなどアプリのテーマ設定を保存したいときなどによく使います。

保存可能なデータ型

保存可能なデータ型は以下です。

・int
・double
・bool
・String
・List<String>

実装

プロジェクト作成

まず、プロジェクトを作成します。

私はstudy_shared_preferencesというプロジェクトを作成しますがフォルダ名は任意のもので良いです。

flutter create study_shared_preferences

初期アプリの実行

プロジェクト作成時に自動生成されるカウンターアプリを以下のコマンドで実行して確認してみましょう。

flutter run

flutter runでアプリが立ち上がると画像のような画面になるかと思います。

このアプリは右下のボタンを押下するたびにカウンターが増加しその回数が画面に表示されます。

shift + rでhot restartするとアプリ全体が再起動して回数が0に戻ると思うのでshared_preferencesを使ってhot restartしても回数が引き継がれるようにしていきましょう。

shared_preferencesをインストール

今回使用するshared_preferencesをインストールします。

flutter pub add shared_preferences

カウンターアプリにshared_preferencesのコードを追加する

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;  // ①

  @override
  // ②
  void initState() {
    super.initState();
    _loadCounter();
  }

  // ③
  void _loadCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = prefs.getInt('counter') ?? 0;
    });
  }

  // ④
  void _incrementCounter() async {
    setState(() {
      _counter++;
    });
    final prefs = await SharedPreferences.getInstance(); 
    await prefs.setInt('counter', _counter); 
  }

・
・
・

①StatefulWidgetとカウンタ変数の初期化

カウントの状態を管理する_counterという変数を定義し、初期値を0に設定します。

②アプリ起動時に保存済みの値を読み込む関数を呼び出す

アプリが起動した際に、SharedPreferencesから保存されたカウンター値を読み込むために、initStateメソッドで_loadCounter関数を呼び出します。

③SharedPreferencesからカウンター値を取得

_loadCounter関数で、保存済みのカウンター値を取得して反映します。

SharedPreferences.getInstance()で、ローカルストレージにアクセスします。次に、prefs.getInt(‘counter’) ?? 0を使ってキー’counter’に保存されているカウンター値を取得しデフォルト値として0を設定します。その後、setStateを呼び出して、読み込んだ値で_counterを更新します。

④カウンターを増やし、その値を保存する

まずsetStateを使ってカウンター値_counterを1増やし、その変更を画面に反映します。SharedPreferences.getInstance()でローカルストレージにアクセスし、prefs.setInt(‘counter’, _counter)を使って、増加後のカウンター値を’counter’というキーで永続的に保存します。この保存処理により、アプリを終了してもカウンター値が保持され、hot restartしても回数が引き継がれるようになります。

おわりに

いかがでしたでしょうか?

今回はFlutterでデータを永続化するshared_preferencesについて解説しました。データの永続化はよく使うと思うのでぜひ参考にしてみてください。