はじめに
株式会社インプルの渡部です。
普段よく使うTextField、TextFormFieldの違いについてなんとなくでこれまでの実装行っていたので改めてこの2つのウィジェットについて調査して簡単にまとめようと思います。
TextField
TextFieldはユーザーがキーボードから文字を入力するためのWidgetです。実際の実装例で言うと検索バーなどがTextFieldで実装されていることが多いです。
サンプルコード
では、実際にコードと実行画面をみてTextFieldについて確認してみましょう。
SizedBox(
width: 300,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '入力してください',
),
),
),添付のコードは横幅を300pxに設定したシンプルなTextFieldのコードです。TextFieldの見た目はデフォルトでは下線のみなのでよく見る枠線で囲まれた形にするにdecorationプロパティで枠線をつけてあげています。また、TextField自体には幅・高さを決めるプロパティがないためTextFieldで幅・高さを設定したい場合はSizedBoxもしくはContainerで囲って親Widgetで設定する必要があります。
よく使うプロパティ
controller
TextEditingController型を与えることで、TextField外から値を取得、変更、クリアすることができます。添付のコードはテキストが入力されるとTextFIeldの値をターミナルに表示し、完了すると削除されるコードです。実際に動かしてみてcontrollerの動きを確認してみると良いかもしれません。
class TextFieldSample extends StatefulWidget {
const TextFieldSample({super.key});
@override
State<TextFieldSample> createState() => _TextFieldSampleState();
}
class _TextFieldSampleState extends State<TextFieldSample> {
final TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
child: TextField(
controller: _controller,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: '入力してください',
),
onChanged: (value) {
_controller.text = value;
print(_controller.text);
},
onSubmitted: (value) {
_controller.clear();
},
),
);
}
}decoration
InputDecorationを使用してTextFieldの見た目をカスタマイズすることができます。枠線やアイコンの他にラベルテキスト、ヒントテキスト、エラーメッセージなどもこちらから設定します。
keyboardType
TextFieldに表示されるKeyboardのタイプを指定することができます。
テキスト、数字、電話番号、メールアドレス、パスワードなど、それぞれのフォームに適したKeyboardのタイプを指定することができます。
onChanged
ユーザーが TextField の値の変更を開始したときにonChangedに設定したコールバックが呼び出されます。TextField の値が controllerから変更された場合はコールバックは呼び出されません。また、キーボードの送信/完了ボタンを押したときなど、ユーザーが編集の完了を示したときに呼ばれるonSubmittedが設定されている場合はonSubmittedの前に呼び出されます。
onSubmitted
ユーザーがキーボートの送信/完了ボタンを押した時にコールバックが呼び出されます。
autofocus
true にすると、Widgetを生成すると自動的にキーボードが開いてTextFieldにフォーカスが当たります。falseの場合、ユーザーがTextFieldをタップした後にフォーカスが当たりキーボードが表示されます。
maxLength
TextFieldで許可される最大文字数を制限することができます。
TextFormField
TextFormFieldもTextField同様ユーザーが文字を入力するためのWidgetですがこちらはTextFormFieldという名前の通りフォーム入力に特化したWidgetです。Form Widgetで囲んで使うことが多いです。コードはTextFieldとほぼ同じでTextFieldのサンプルコードをTextFormFieldに変更することで使えます。
よく使うプロパティ
validator
入力内容が要件を満たしているか確認するための要件部分の設定を行います。validatorの設定は少し複雑なので今後別でまとめようと思います。
autovalidateMode
フォームの自動バリデーション有効/無効を設定します。設定は以下の３種類です。
- AutovalidateMode.onUserInteraction：コンテンツが変更された後に自動バリデーション
- AutovalidateMode.always：ユーザーの操作がなくても自動バリデーション
- AutovalidateMode.disabled：自動バリデーション無効
デフォルトはAutovalidateMode.disabledです。
controller
TextField同様、TextEditingController型を与えることで、TextField外から値を取得、変更、クリアすることができます。
decoration
InputDecorationを使用してTextFieldの見た目をカスタマイズすることができます。枠線やアイコンの他にラベルテキスト、ヒントテキストをこちらから設定します。
onChanged
TextField同様、ユーザーが 値の変更を開始したときにonChangedに設定したコールバックが呼び出されます。
まとめ
いかがでしたでしょうか？今回は入力フォームに使うTextFieldとTextFormFieldについてまとめてみました。
私はこれまでtextFormFieldはフォーム画面でそれ以外はTextFieldで実装していましたがそれで問題なさそうでした。よく使うプロパティについても軽くまとめているので良かったら参考にしてみてください。