Flutter図鑑

Text Field

TextFiledはユーザーからのテキスト情報を受け取ることができます。
ここではFlutterから提供されているTextFieldの基本的な使用方法をご紹介します。

基本的な使用方法

  • TextField
  • TextFormField

Flutterから提供されているText Fieldには上記種類があります。
TextFieldは横幅いっぱいに伸びるため、サイズを指定する場合はSizedBoxなど他のWidgetを使用して対応します。

TextField(
  decoration: InputDecoration(labelText: "Standard Field"),
),
TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(), labelText: "Outlined Field"),
),

Colors

TextFiledの色を指定するためにはOutlineInputBorderやOutlineInputBorderで対応することができます。
また、focusedBorderの値を変更してフォーカス時の色を指定することもできます。

TextField(
  decoration: InputDecoration(
      labelStyle: TextStyle(color: Colors.green),
      enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      labelText: "Outlined Field"),
),

Validation

  • TextFormField

TextFieldでエラーテキストを表示するにはTextFormFieldを使用して対応することができます。
使用する際は必ずForm()で囲い、formKeyを設定しなければなりません。

validatorの値を組み換えれば自在にValidationを作成することができます。

final _formKey = GlobalKey<FormState>();
Form(
  key: _formKey,
  child: TextFormField(
    onChanged: (text) {
      _formKey.currentState!.validate();
    },
    initialValue: "Hello World",
    validator: (value) {
      if (value == "Hello World") {
        return "Error!";
      }
      return null;
    },
    decoration: const InputDecoration(
      labelText: "Error Field",
    ),
  ),
)

入力値の操作

入力値を取得または変更するにはTextEditingController()が最も適しています。

final textController = TextEditingController(text: "default value");
TextField(
  controller: textController,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: "Control Field",
  ),
),

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next