Flutter 二種の入力フォーム”TextField”と”TextFormField”

テキストフィールドを使用することで、アプリにフォームを実装できます。

Flutterには、”TextField”と"TextFormField"の2種類のテキストフィールドウィジェットが用意されている。

"TextField"は最もシンプルな入力フォームです。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'テキストを入力してください。'
  ),
);

TextFieldはデフォルトスタイルでは下線が表示されます。Fieldのスタイルを変えたい場合は、decorecionプロパティで、InputDecorationウィジェットを指定し、borderやhinttextなどを追加して、スタイルを整えます。

"TextFormField"はフォーム入力で必要なさまざまな機能を提供してくれています。

TextFormField(
  decoration: InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username'
  ),
);

例えば、TextFormFieldにはvalidatorというプロパティがあり、条件に合わない入力に対して赤文字でエラーを出す機能を備えています。

‍

参考）

Tags