0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Dart】非同期取得した値をTextFieldの初期値に入れる方法

Posted at

#何をするのか?
非同期で取得した値をTextFieldの初期値に入れるのに詰まったので、備忘録としてまとめていきます。

#TextFormFieldではできない?
通常DartでTextFiledに初期値を設定する場合、以下のようにTextFormFieldのinitialValueに値を設定します。
しかしこの方法だと設定する値はビルド時に初期化されるみたいなので、ビルドを通した後に取得した値などを設定した場合には初期値として反映されなくなります。

TextFormField(
    initialValue: "Test",
)

#TextEditingController
以上のような理由があるため、ビルド後に取得した値を初期値として反映するためにはTextEditingControllerを使用する必要があります。
コードは省略していますが、まずStatefulWidgetにして画面を開くたびにinitStateが走るようにしておきます。そしてTextEditingControllerクラスをインスタンス変数として定義し、setState内でそのインスタンス変数のtextを更新することで、もう一度initStateがよばれ画面を再構築します。
あとはTextFieldのcontrollerにプロパティにtoken_controllerを設定することで、対象のTextFieldの初期値が反映されます。

final TextEditingController token_controller = TextEditingController();

@override
void initState() {
  super.initState();
  getValue();
}

void getValue() {
  // 例としてここではキーチェーンを取得しています。
  FlutterKeychain.get(key: 'token').then((token) => {
    setState(() {
      token_controller.text = token;
    }),
  });
}

// 省略
TextField(
  controller: token_controller,
  // 省略
)

#参考
https://quality-start.in/2021/08/flutterで非同期で取得した値をtextfieldに入れて初期化した/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?