【Flutter】TextEditingController*SharedPreferences テキストフィールドの値をアプリが閉じても保存されているようにする

08_備忘録

備忘録です。テキストフィールド(TextField)に入力した内容を保存できるようする方法です。

最終コード

class LabelTextState extends State<LabelText> {
  late TextEditingController _controller;
  String _labelName01 = "Hint Text 1";

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _getPrefItems();//アプリ立ち上げ時に値を取得
  }

  _setPrefItems(String text) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString("labelName01", text);
  }

  _getPrefItems() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _labelName01 = prefs.getString('labelName01') ?? "Hint Text 1";//??はnull判定、nullなら右の値を代入
      _controller.text = _labelName01; // コントローラーにも値をセット
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      maxLength: 20,//文字数制限
      decoration: InputDecoration(
        floatingLabelBehavior: FloatingLabelBehavior.always,
        labelText: 'Label Name 1',
        hintText: "Hint Text 1",
        hintStyle: TextStyle(color: Colors.grey),
        border: OutlineInputBorder(),
      ),
      onChanged: (text) {
        _setPrefItems(text);//変化時にtextを保存
      },
    );
  }
}

上記が実際動作させたコードで、以下は調べものの備忘録としてつけています。

GPTなど利用して出力している部分もあるので、間違いや追記などあれば都度更新します。

TextEditingController

テキスト入力の内容を簡単に制御できるため、テキストフィールドとテキストデータの同期を効率的に行うことができます。

TextEditingController は、テキスト入力ウィジェット(例: TextField)とテキストデータを連携するためのクラスです。テキスト入力フィールドのテキスト内容を制御し、テキストの設定や取得、変更イベントの監視などを行うことができます。

主な役割は以下:

  1. テキストの設定と取得: TextEditingController を使用すると、テキスト入力フィールドに初期値を設定したり、入力されたテキストを取得したりできます。具体的には、TextEditingControllertext プロパティを使用して現在のテキストを取得したり設定したりできます。
  2. テキスト変更の監視: addListener メソッドを使用して、テキストが変更されたときにコールバックを実行することができます。これにより、テキストが変更された際に必要な処理を実行できます。

コメント:上記の2は最終コードでは使用していません。初めにSharedPreferencesを使用しようと思ってコードを書き始めたので、値を保存するところはこちらの機能を使っていません。▼このコードが使えるならこちらを使った方がきれいなコードになると思います。

使用例:

TextEditingController _controller = TextEditingController();

@override
void initState() {
  super.initState();
  _controller.text = "Initial Value"; // テキストを設定
  _controller.addListener(_handleTextChange); // テキスト変更の監視を追加
}

void _handleTextChange() {
  String newText = _controller.text;
  // テキスト変更時の処理を実行
}

@override
void dispose() {
  _controller.dispose(); // メモリリークを避けるために破棄
  super.dispose();
}

// テキスト入力ウィジェットの中でコントローラーを使用する例
TextField(
  controller: _controller,
  onChanged: (text) {
    // テキストが変更されたときの処理
  },
)

SharedPreferences

アプリケーションの設定や状態情報などの小さなデータを、キーと値のペアで永続的に保存するための仕組みです。これを使用することで、アプリケーションが再起動されてもデータが保持されるため、ユーザー体験の向上やアプリの設定管理に役立ちます。

主な役割は以下:

  1. 永続的なデータ保存: SharedPreferences を使用すると、アプリが終了してもデータが保持されるため、ユーザーがアプリを再起動した際に前回の設定や状態を復元することができます。
  2. アプリの設定管理: アプリの設定やユーザーの状態情報(例: ユーザーの言語設定、テーマ、ログイン状態など)を保存するのに適しています。これにより、ユーザーがアプリの動作や外観をカスタマイズできるようになります。
  3. シンプルなキーと値のストレージ: SharedPreferences はシンプルなキーと値のペアを保存するため、複雑なデータ構造を扱う必要がなく、簡単にデータを読み書きできます。

使用例:

import 'package:shared_preferences/shared_preferences.dart';

// 値の保存
_setPrefItems() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString("keyName", "value");
}

// 値の読み込み
_getPrefItems() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String value = prefs.getString("keyName") ?? "default"; // デフォルト値を指定
}

コメント:最終コードのinitState()との組み合わせを意識したほうが良いと思っています。上記の内容は値をset getするだけのコードなので、初期値を設定するとき(init)に値をgetしておく。

コメント

タイトルとURLをコピーしました