見出し画像

作って学ぶ、Flutterアプリ開発 〜データ保存〜

くろねこ

こんにちは！
この記事はこちらの続きです。

TODOアプリの最初の記事はこちらです。
よかったら一緒にTODOアプリ作っていきましょう！

ところで、前回のプログラムにバグがあった事にお気づきの方はいらっしゃるでしょうか？
実は、ダイアログ内でStateの変更をする為にStatefulBuilderを使ったのですがその影響でTODOを入力してもリストが更新されなくなっていました。解決方法として、このようなメソッドを用意します。

  void _setText() {
    setState(() {
      _todoList.add(_textController.text);
    });
  }

このメソッドは_MyHomePageState内に書きます。
そして、「追加」ボタンが押された時のイベントをこう書き換えます。

TextButton(
  onPressed: isEdited
      ? () {
          // 追加ボタンが押された時にここの実装が反映されます
          _setText();
          setState(() {
            isEdited = false;
          });
          _textController.clear();
          Navigator.pop(context);
        }
      : null,
  child: const Text('追加'),
)

さらに、このタイミングで「isEdited = false;」にします。
これも前回なかったコードなのですが、こうしておかないと次にダイアログを開いた時に入力が空でも「追加」ボタンが押せる状態になってしまっていました。

という訳で、バグ回収ができたところで今回の本題へ入っていこうと思います。

さて、ここまで作ってきたTODOアプリなんですが、アプリを閉じるとせっかく入力したTODOが消えてしまいますね。
データを変数に入れるだけでは、データをずっと取っておく事ができません。
では、入力したTODOをどこかに保存しましょう。
これをデータの永続化といいます。
データを永続化する方法は色々ありますが、今回はShared preferencesというライブラリを使ってデータを保存してみましょう。

本来であればこのShared preferencesは、簡易的なデータの保存に使われます。
例えば、アプリをインストールした直後にチュートリアル画面がでてくるアプリを見た事があるかと思います。
あれは、２回目に起動した時には出てこないかと思います。
これはShared preferencesのようなデータの保存方法を使って、一度チュートリアルを見ていますよというデータ（フラグ）を保存しています。
なので、２回目以降はチュートリアルは出てこないんですね。
こんな感じで、ちょっとしたデータを保存するのに向いているのがShared preferencesです。
本来であればTODOデータのようなものを保存するべきではないのですが、てっとりばやくデータの保存を経験して欲しいので今回はこれを使います！

まずは現在のプロジェクトでShared preferencesが使えるようにしていきましょう。

pub.devのinstallタブに書かれている

shared_preferences: ^2.2.2

ここをコピーしてください！
そして、自分のアプリのpubspec.ymlを開いてください。

pubspec.yml

ここに貼り付けてください。
そして、右上にある「Pub get」という青い文字のボタンを押してください。
これで、使いたいライブラリがこのアプリで使えるようになりました。
では、さっそく保存する部分を作っていきましょう。

final shardPreferences = SharedPreferences.getInstance();

SharedPrefarenceを使うために、上のコードを書いてください。
すると、上の画像のようにSharedPreferencesのところが赤くなっていますね。
ここにカーソルを合わせてoption+Enterを押してみてください。

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

２行目にimportが追加されました。
これで、shared_preferencesの機能をこのファイル内で使う事ができます。
では早速データを保存していきましょう。

さきほどのバグ修正の時に作ったメソッド内に次のようなコードを追加します。

  void _setText() {
    setState(() {
      _todoList.add(_textController.text);
    });
    shardPreferences.then((value) {
      value.setStringList('todo', _todoList);
    });
  }

これで、入力したTODOデータが保存されます。
ShardPreferencesには文字だけではなく、数字やbool値も保存できるので色々使ってみてください！
次に、保存したデータを取り出して画面に表示したいですよね。

AndroidStudio

AndroidStduio上で右クリックしてください。
すると上のようなメニューがでてきます。
Generate…を選択してください。

AndroidDtudio

さらにこんなメニューがでてきたと思います。
Override Methods…を選択してください。

AndroidStudio

ここから「initState()」を探して選択し、「OK」を押してください。
ファイルにinitStateメソッドが追加されました。
これを下のように書き換えてください。

  @override
  void initState() {
    super.initState();
    shardPreferences.then((value) {
      final todo = value.getStringList('todo');
      if (todo != null) {
        setState(() {
          _todoList.addAll(todo);
        });
      }
    });
  }

ShardPreferencesからデータを取得して、_todoListへセットしてあげています。
こうすることで、画面上に保存しておいたTODOのリストを表示する事ができます。
では、何か入力してみてください。
そして、一度アプリを閉じて再度開いてみてください。
アプリを閉じたとしても入力したTODOが消えずに残っていると思います。

これでTODOの保存ができました。
どうでしょうか？
難しかったですか？
これを応用すれば色々保存できそうですね。
せっかく覚えたのでShardPreferences色々試してみてください。

ところで、せっかくチェックボックスを置いたのにこのチェックボックス、チェックができなくて不便ですね。
次回はこのチェックボックスをチェックする方法について書きたいと思います。
それでは、また次回宜しくおねがいします。

この記事が気に入ったらサポートをしてみませんか？