【Flutter】 TextFieldに初期値を設定する方法を解説

今回は、FlutterのTextFieldウィジェットに初期値を設定する方法を解説します。

簡単に実装できますのでぜひ最後までご覧ください。

TextFieldに初期値を設定する方法
おわりに

TextFieldに初期値を設定する方法

「TextField」ウィジェットは入力欄を作成することができるウィジェットです。

その「TextField」ウィジェットの入力欄にあらかじめ値が入力されている状態にする方法を解説します。

まずは簡単な入力欄のあるUIを作成してみましょう。

サンプルコードは以下です。

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextFieldの初期値を設定'),),
      body: Center(
        child: TextField(),
      ),
    );
  }
}

こちらのTestクラスを表示すると以下のような入力欄のあるUIになります。

こちらに初期値を設定できるようにするには変数を定義する必要があります。

_TestStateクラスの中に以下の変数を定義します。

TextEditingController _controller = TextEditingController(text: 'TextFieldの初期値');

このように「TextEditingController」の「text」プロパティに初期値にしたい値を入力することで初期値を設定することができます。

最後に、「TextField」ウィジェットの「controller」プロパティに先ほど定義した_controllerという変数を設定することで初期値の設定は完了です。

完成後のコードはこちら。

class Test extends StatefulWidget {
  const Test({Key key}) : super(key: key);

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  TextEditingController _controller = TextEditingController(text: 'TextFieldの初期値');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextFieldの初期値を設定'),),
      body: Center(
        child: TextField(
          controller: _controller,
        ),
      ),
    );
  }
}

UIはこのようになります。