まえがき

このページについて

Flutterアプリで、ユーザー設定などの簡易な情報を保存、呼び出しをする実装のサンプルを紹介しています
アプリはAndroid, iOS, Linux, macOS, web, Windowsの全て対応だと思いますが、動作確認はiOS Simulatorでしか行っていません
FlutterやDart、その他開発環境に関する基礎的な説明は対象範囲外です

記載のサンプルアプリについて

flutter createで生成されるカウンターアプリをベースにしています
int型の値を端末に保存し、次回アプリ起動時には値を自動で呼び出しビューに反映します
パッケージshared_preferencesを利用します
アプリ全体のGithubリポジトリ、最下部にはmain.dart全文を記載してます
呼び出した値の反映にはFutureBuilderを利用しています
(他で紹介されている記事ではsetStateのみで値をビューに反映している物がありますが、厳密には不正を起こす可能性があるのでオススメしません！)

完成イメージ

今回はFlutterの新規作成後のカウンターアプリで、タップした回数をshared_preferencesで保存するという実装です
今回はint型の値を扱いますが、例えばダークモードの設定などを保存する場合はboolなどに置き換える方法も考えられます
画像はiOSのSimulatorの画面で、再起動後もタップした回数が保持されている様子です

環境

flutter doctorの出力

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5.1 21G83 darwin-x64, locale en-JP)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] VS Code (version 1.70.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

`shared_preferences`について

iOSやmacOSのNSUserDefaults、AndroidのSharedPreferencesに相当する機能を提供する公式パッケージ
データをKeyとValueのセットで保存し、保存した値はKeyを指定して呼び出します
実装も簡単で、アプリのユーザー設定など簡易的なデータの読み書きに向いています
読み書きできる値の型はint, double, bool, String, List<String>です
通常のDBとしてのデータの管理にはSQLiteなどを利用してください

実装

手順

shared_preferencesの追加
MyHomePageのFutureBuilder化
CounterViewWidgetの実装

1. `shared_preferences`の追加

Flutterアプリのルートディレクトリからflutter pub addを実行
yamlファイルにdependenciesが追加される

flutter pub add shared_preferences

pubspec.yaml

# ...
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  shared_preferences: ^2.0.15
# ...

shared_preferencesをdartファイルにimport

main.dart

import 'package:shared_preferences/shared_preferences.dart';

2. `MyHomePage`の`FutureBuilder`化

ここで行うこと

MyHomePageをStatelessWidget化
値の呼び出しメソッドを実装
MyHomePageのreturnをFutureBuilderに変更

詳しい手順

MyHomePageをStatelessWidget化
- FutureBuilderはsetStateで再描画する必要がないためStatelessWidget化
- エディタ上でstlesと打ちエンターを押すと自動で雛形生成されます
- 生成されたWidgetの名前をMyHomePageとし、先にあったMyHomePageは削除してください

値呼び出しメソッドの実装

非同期で値を呼び出す_futureLoadedValue()を実装
戻り値はFuture<int>型

main.dart

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  
  // ---------- 追加ここから ----------
  
  // 保存した値呼び出し
  Future<int> _futureLoadedValue() async {
    // SharedPreferencesインスタンスを生成
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getInt('counterValue') ?? 0; // 保存した値がなければゼロ
  }

  // ---------- ここまで ----------

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

returnのFutureBuilder化

上記メソッドの実行完了後にビルドするようにFutureBuilderを利用します
future:には上記メソッドの戻り値
builder:以下に、処理状況に応じた分岐と、それぞれにWidgetを実装

main.dart

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  // 保存した値ロード
  Future<int> _futureLoadedValue() async {
    // ...
  }    

  @override
  Widget build(BuildContext context) {

    // ---------- 追加ここから ----------

    // 保存した値呼び出し
    final futureLoadedValue = _futureLoadedValue();

    return FutureBuilder(
      future: futureLoadedValue,
      builder: (context, AsyncSnapshot<int> snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          // 値呼び出し中プログレスバー
          return Scaffold(
            appBar: AppBar(title: const Text('SP COUNTER APP')),
            body: const Center(child: CircularProgressIndicator()),
          );
        } else if (snapshot.hasError) {
          // 呼び出し失敗
          return Scaffold(
            appBar: AppBar(title: const Text('SP COUNTER APP')),
            body: Center(child: Text(snapshot.error.toString())),
          );
        } else {
          // 呼び出し後
          return CounterView(initialValue: snapshot.data!); // このWidgetは未実装です
        }
      },
    );

    // ---------- ここまで ----------
  }
}

3. `CounterView`Widgetの実装

ここで行うこと

新しいStatefulWidgetを生成する (デフォルトカウンターアプリのMyHomePageに相当)
エディタ上でstfulと打ちエンターを押すと自動で雛形生成されます
必要な変数と、インクリメント＆保存のメソッドを実装
returnするWidget部分を実装 (カウンターアプリとほぼ同じ)

詳しい手順

新しいStatefulWidgetを生成

stfulでStatefulWidgetの雛形を生成
CounterViewと命名
引数initialValueを定義 (呼び出し後の値を親から受け取るため)

main.dart

// 以下すべて追加

// ロード後のメインのビュー
class CounterView extends StatefulWidget {
  const CounterView({Key? key, required this.initialValue}) : super(key: key);
  // 親から受け取る初期値
  final int initialValue;

  @override
  State<CounterView> createState() => _CounterViewState();
}

class _CounterViewState extends State<CounterView> {
  @override
  Widget build(BuildContext context) {
    // ...
  }
}

必要な変数と、インクリメント＆保存のメソッドを実装

counterはlateとし、初期値は初回ビルド時に代入
firstBuildで初回ビルドかどうかを判定する
これにより、setStateによる再描画でinitialValueが繰り返し代入されるのを防ぐ
値の保存は非同期で行われます
重要度や必要に応じてawaitによる同期化や、エラー処理の追加をしてください
インクリメントは値を更新とsetStateに加えて、保存処理メソッド実行

main.dart

// ロード後のメインのビュー
class CounterView extends StatefulWidget {
  // ...
}

class _CounterViewState extends State<CounterView> {
  // ---------- 追加ここから ----------
  bool firstBuild = true; // 初回ビルド判定
  late int counter; // カウンターとして表示する数 (ここでは初期値を定義しない)
  // ---------- ここまで ----------

  @override
  Widget build(BuildContext context) {

    // ---------- 追加ここから ----------
    
    // 初回ビルド時はcounterに初期値代入
    if (firstBuild) {
      counter = widget.initialValue;
      firstBuild = false;
    }

    // 値の保存
    void _saveValue() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      prefs.setInt('counterValue', counter);
    }

    // 値のインクリメント＆保存まで実行
    void _incrementCounter() {
      setState(() {
        counter = counter + 1;
      });
      _saveValue();
    }

    // ---------- ここまで ----------

    // ...
  }
}

Widget部分を実装
- 初期カウンターアプリとほぼ同等のScaffold部を実装

main.dart

class CounterView extends StatefulWidget {
  // ...
}

class _CounterViewState extends State<CounterView> {
  int? counter;
  @override
  Widget build(BuildContext context) {

    bool firstBuild = true;
    late int counter;

    if (firstBuild) { // ... }
    void _saveValue() async { // ... }
    void _incrementCounter() { // ... }

    // ---------- 追加ここから ----------

    return Scaffold(
      appBar: AppBar(title: const Text('SP COUNTER APP')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );

    // ---------- ここまで ----------

  }
}

あとがき

いかがだったでしょうか？

shared_preferences自体はとてもシンプルで使いやすいパッケージではあるのですが、初回の呼び出し時にはFutureBuilderを使う点や、不要な再描画がかからないようにするガード的に実装などは、Flutterやアプリ開発に慣れてない開発者の方には参考にしていただける部分があったのではないかと思います

今回はintのみを扱いましたが、アプリ起動時に呼び出し必要なユーザー設定系は全て同様に実装可能だと思いますので、みなさんもぜひご自身のアプリでお試しください！

いいねとご質問お待ちしております^ ^

`main.dart`のコード全体

上の解説パートとコメントなどが若干異なる部分があります
ソースコードはこちらのリポジトリからご覧ください

main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  // 保存した値ロード
  Future<int> _futureLoadedValue() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 保存した値がなければゼロ
    return prefs.getInt('counterValue') ?? 0;
  }

  @override
  Widget build(BuildContext context) {
    // 保存した値ロード
    final futureLoadedValue = _futureLoadedValue();

    return FutureBuilder(
      future: futureLoadedValue,
      builder: (context, AsyncSnapshot<int> snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          // 値ロード中プログレスバー
          return Scaffold(
            appBar: AppBar(title: const Text('SP COUNTER APP')),
            body: const Center(child: CircularProgressIndicator()),
          );
        } else if (snapshot.hasError) {
          // ロード失敗
          return Scaffold(
            appBar: AppBar(title: const Text('SP COUNTER APP')),
            body: Center(child: Text(snapshot.error.toString())),
          );
        } else {
          // ロード後
          return CounterView(initialValue: snapshot.data!);
        }
      },
    );
  }
}

// ロード後のメインのビュー
class CounterView extends StatefulWidget {
  const CounterView({Key? key, required this.initialValue}) : super(key: key);
  final int initialValue;

  @override
  State<CounterView> createState() => _CounterViewState();
}

class _CounterViewState extends State<CounterView> {
  // 初回ビルド判定
  bool firstBuild = true;
  late int counter;

  @override
  Widget build(BuildContext context) {
    if (firstBuild) {
      counter = widget.initialValue;
      firstBuild = false;
    }

    // 値の保存
    void _saveValue() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      prefs.setInt('counterValue', counter);
    }

    // 値のインクリメント＆保存まで実行
    void _incrementCounter() {
      setState(() {
        counter = counter + 1;
      });
      _saveValue();
    }

    return Scaffold(
      appBar: AppBar(title: const Text('SP COUNTER APP')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}