クオリティスタート
Tech

Flutterで非同期で取得した値をTextFieldに入れて初期化したい

公開日 更新日 読了目安 2分執筆 湯本 堅隆(株式会社クオリティスタート)

FlutterでTextFieldに対して初期値を入れる方法はTextEditingControllerを使います。TextFormFieldであればinitialValueという初期値を入れるプロパティがあります。こいつですね。

TextFormField(
    initialValue: "初期値",
)

ただ、この値はビルド時に初期化されるので、ウィジェットのビルドを通してから設定ファイルで保存した値を読み込む、という場合には利用できません。この場合は、以下のようなコードに変える必要があります。initStateを使って再ビルドするのが確実です。

GitHub Gist でコードを見る

まず、StateFulWidgetにして、画面を開く度にinitStateが走るようにしておきます。setStateが呼び出されると、FlutterのStateFulWidgetウィジェットはもう1度initStateを呼び出します。画面をまるごと再構築することで、TextEditingControllerのtextプロパティに値が入った状態で画面をビルドし直すことで、初期値が入るというやり方です。

Riverpodのようなライブラリで管理することもできます。その場合はFutureProviderを使い、initStateを利用しません。Widgetのライフサイクルに依拠するのではなく、Riverpodが管理するProviderに状態管理を委ねます。FutureProviderで値を読み終わるのを待ってから、TextEditingControllerのtextプロパティに値を入れます。2021年の秋頃に全部Riverpodに差し替えました。

GitHub Gist でコードを見る

ご参考まで。

記事の内容について、相談してみませんか。

記事で紹介した進め方を、貴社のプロジェクトでどう使えるか、PMとエンジニアがお話しします。