今回は、Flutterのフォーム入力ウィジェットであるTextFormFieldについてご紹介いたします。
TextFormFieldとは
TextFormFieldは、フォーム内でテキストを入力するためのウィジェットで、ユーザーからの入力を受け取ることができます。また、入力内容に対するバリデーションや、フォーム送信時にデータを取得することができます。
Formってそもそもなんだろう？とお思いの方は、よかったら以下を見てみて下さい。
基本的な使い方
以下は、TextFormFieldを使った基本的な例です。テキスト入力が可能であり、入力内容が変更されるたびにコンソールに出力されます。
TextFormField(
onChanged: (value) {
print(value);
},
);上記コードを実行する際のコード全体および、実行した結果は以下のとおりです。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('TextFormField Test'),
),
body: Form(
child: Column(
children: <Widget>[
TextFormField(onChanged: (value) {
print(value);
})
],
),
),
),
);
}
}
上記の通り、入力フィールドに文字を入力すると、１文字入力するたびにプロンプト上には入力フィールドの内容が出力されます。この例は入力フィールドの装飾もなく、シンプルなものなので、実際には下記のようなプロパティを使用して、見栄えの良い入力フィールドにします。
使用できるプロパティと概要
TextFormFieldで使用できる主なプロパティは以下の通りです。
autovalidateMode：自動バリデーションのモードを設定します。controller：TextEditingControllerを指定します。decoration：入力フィールドの見た目を設定します。validator：入力内容のバリデーションを行う関数を指定します。onSaved：フォームが送信されたときに呼ばれる関数を指定します。
各プロパティの使い方
autovalidateMode
autovalidateModeは、自動バリデーションのモードを設定するプロパティです。以下の3つの値が設定できます。
AutovalidateMode.disabled：自動バリデーションを無効化します。AutovalidateMode.always：入力値が変更されるたびに自動的にバリデーションを行います。AutovalidateMode.onUserInteraction：ユーザーがフォームに触れたときにバリデーションを行います。
TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
);controller
controllerは、TextEditingControllerを指定するプロパティです。このプロパティを使用すると、テキスト入力内容を取得したり、テキストを編集することができます。
final _controller = TextEditingController();
TextFormField(
controller: _controller,
);decoration
decorationは、入力フィールドの見た目を設定するプロパティです。InputDecorationクラスを使って、ラベルテキストやアイコンなどを設定することができます。
TextFormField(
decoration: InputDecoration(
labelText: '名前',
hintText: '山田 太郎',
icon: Icon(Icons.person),
),
);validator
validatorは、入力内容のバリデーションを行う関数を指定するプロパティです。この関数は、引数として入力内容を受け取り、返り値としてエラーメッセージを返します。エラーメッセージがnullまたは空文字列の場合、バリデーションは成功したと判断されます。
final _formKey = GlobalKey<FormState>();
String? _validateName(String? value) {
if (value == null || value.isEmpty) {
return '名前を入力してください。';
}
return null;
}
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
validator: _validateName,
decoration: InputDecoration(
labelText: '名前',
),
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// フォームが正常に検証された場合の処理
}
},
child: Text('送信'),
)
],
),
)onSaved
onSavedは、フォームが送信されたときに呼ばれる関数を指定するプロパティです。この関数は、引数として入力内容を受け取り、フォーム送信時に取得したいデータの処理を行います。
final _formKey = GlobalKey<FormState>();
String? _name, _email;
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
onSaved: (value) {
_name = value;
},
decoration: InputDecoration(
labelText: '名前',
),
),
TextFormField(
onSaved: (value) {
_email = value;
},
decoration: InputDecoration(
labelText: 'メールアドレス',
),
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// フォームが正常に検証され、値が保存された場合の処理
print('名前: $_name');
print('メールアドレス: $_email');
}
},
child: Text('送信'),
)
],
),
)上記サンプルコードを実行し、名前・メールアドレスを入力すると、コマンドプロンプト上に以下のように表示されます。
名前: こんにちは おはよう
メールアドレス: abc@abc.com.jpまとめ
TextFormFieldは、フォーム内でテキスト入力を受け取るためのウィジェットで、自動バリデーションや入力内容の取得にも対応しています。autovalidateMode、controller、decoration、validator、onSavedなどのプロパティを使用することで、より高度なフォーム処理が可能になります。ぜひ、活用してみてください。