見出し画像
Photo by kakukakubooks

プログラミング初心者が始めるFlutter学習③-2

PSP Tech

こんにちは。PHR事業開発部の大岡です。
私の回は、Flutterのソースコードを解説していくシリーズになっています。
この記事の最後に、過去の回のリンクをまとめて紹介します。

今回は、前回作った入力フォームで入力したデータをアプリ内で保存できるようにします。
ソースコードはこちらです。
https://github.com/psp-engineer/data_input


SharedPreferencesライブラリを使って、入力された情報をスマホに保存できるようにする

SharedPreferencesというライブラリを使ってみます。
https://pub.dev/packages/shared_preferences

ライブラリ：便利な処理をひとまとめにしたもの。ある機能を実現するためのプログラムを誰かが作って、みんなで使えるようにしている。

SharedPreferencesは、「シンプルなデータならアプリ内に保存しておける機能」を実現できるライブラリです。このライブラリを使えば、自分で1から実装せずにこの機能をアプリに取り入れることができます。

Flutterのライブラリは、こちらから探すことができます。
https://pub.dev
packageと書いてありますがライブラリと同義です。

ライブラリの追加方法

  • pubspec.yamlファイルのdependencies: に追加したいpackage名とバージョンを追記

dependencies:
  flutter:
    sdk: flutter

  shared_preferences: ^2.0.15 #ここに追加

  • Pub getする
    IDEによってはpubspec.yamlファイルを開くと、右上にFlutterコマンドのショートカットが表示されるので「Pub get」をクリック。またはターミナルで flutter pub get を実行。

  • 使うファイルでimportする
    import系は使いたいファイルの最初に書きます。

import 'package:data_input/gender_type.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:data_input/next_page.dart';
import 'package:shared_preferences/shared_preferences.dart'; //これを追加

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

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

ソースコードの中で使ってみる

まず、SharedPreferencesのインスタンスを取得します。この中に値の保存、取り出しができるメソッドが入っています。

class _MyHomePageState extends State<MyHomePage> {
  // SharedPreferencesのインスタンスを取得。
  final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  // ピッカーで選択された項目をTextFormFieldに表示するためのcontroller
  final TextEditingController _controller = TextEditingController();
  // TextFormFieldに入力された文字列
  String _name = '';

一番下に、保存するための「保存」ボタンを追加します。

保存ボタンを追加

保存ボタンを押した時に値を保存するようにします。

Widget saveButton() {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 10.0),
    child: OutlinedButton(
      child: const Text('保存'),
      onPressed: () {
        // 入力されたデータを保存
        _saveData();
      },
    ),
  );
}

_saveData()の中で、先ほど取得したSharedPreferencesを使います。SharedPreferencesは保存できる値のデータ型が決まっており、下記のデータが保存できます。

  • int型（整数）

  • double型（小数）

  • bool型（true / false）

  • String型（文字列）

  • String型のリスト（文字列のリスト）

データ型によって保存/取り出しを行う時のメソッド名が変わります。
今回はString型で保存するのでsetStringというメソッドを使います。
prefs.setString(key, 値) の形で記述し、keyとセットで保存します。値を取り出す時にこのkeyを指定して取り出すためです。

void _saveData() async {
  final prefs = await _prefs;

  // 入力された名前（_name）をnameというkeyとセットで保存
  prefs.setString('name', _name);
  prefs.setString('gender', _gender.code);
  prefs.setString('region', _region);
}

これで入力した値を保存できました。

アプリを落としてまた開いた時に保存した情報を取り出して、氏名・性別・出身地の入力欄に表示させる

アプリを落としてまた開いた時に保存された値を表示するためには、最初に値を取り出さなければいけません。こういう時に使うのは initState() です。

initState()：画面が最初に表示される時（widgetの初期化時）に1回だけ呼ばれるメソッド。最初に1回だけ行いたい処理はこの中に書く。

initState()に、値を取り出す処理を書いていきます。

@override
  void initState() {
    super.initState();
    // SharedPreferencesに保存されている値を取り出す
    _getSavedData();
  }

_getSavedData()の中身は次のようになっています。
保存した時に指定したkeyを使ってprefs.getString(key, 値) の形で取り出します。
?? ‘ ’ の部分は、keyに紐づく値が保存されていなかった場合に’ ‘（空文字）を代入しますよ、ということです。こうすると、値が何もなかった時には空欄で表示することができます。

void _getSavedData() async {
    final prefs = await _prefs;

    // _setTextメソッドで、取り出した値を_nameに代入
    _setText(prefs.getString('name') ?? '');
    // 取り出した値をTextEditingControllerでTextFormFieldに表示させる
    _nameCtrl.value = TextEditingValue(text: _name);

    final String genderCode = prefs.getString('gender') ?? '';
    _setGender(GenderExtension.valueOf(genderCode));

    _setRegion(prefs.getString('region') ?? '');
  }

TextFormField()に手入力以外の方法でテキストを表示させるにはTextEditingController()を使わないといけないので、氏名の入力欄用のTextEditingControllerとして_nameCtrlを設定しています。

これで、SharedPreferencesに値を保存して、アプリを落としても入力された値が保持されるようになりました。

このシリーズを始めてから1年ちょっと経ちました。当初の想定よりもだいぶ長引いているので、次何やるのか忘れてしまいそうです。
次回は「一覧・詳細表示画面を作る」みたいですね。一覧画面の項目をタップすると、それぞれの詳細情報が見られるような画面を作っていきます。

Flutterシリーズ過去の記事

プログラミング初心者が始めるFlutter学習①
https://note.com/nobori_tech/n/n4fb6bf4afc4a

プログラミング初心者が始めるFlutter学習②-1
https://note.com/nobori_tech/n/n458b782a5242

プログラミング初心者が始めるFlutter学習②-2
https://note.com/nobori_tech/n/n410121fb1b67

プログラミング初心者が始めるFlutter学習③-1
https://note.com/nobori_tech/n/n51091b5b3b82