【Flutter】TextFormFieldの入力値をバリデーションする方法

TextFormFieldで入力した値をバリデーションする方法を紹介します。

今回はTextFormFieldにテキスト入力されていなかった場合、エラーメッセージを表示するバリデーションを実装していきます。(解説で使用しているコードは記事下に載せてあるコードの一部です)

\ 世界最大級のオンライン学習サービス /

目次

TextFormFieldにバリデーションを実装する

これから解説していくコードの完成形です。

ステップ1:GlobalKeyとFormを生成

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [],
      ),
    );
  }
}

GlobalKeyとなる_formKeyを定義し、Formkeyの引数として渡します。

ステップ2:TextFormFieldでバリデーションのロジックを決める

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '未入力です';
    }
    return null;
  },
),

TextFormFieldvalidatorでバリデーションのロジックを決めます。

validatorではユーザーが入力したテキストを受け取り、検証エラーが発生した時の「エラーテキスト」、発生しなかった時はnullを返すよう定義します。(valueで入力値を受け取る)

ステップ3:サブミットボタンを生成してバリデーションを行う

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('テキスト入力されています')),
      );
    }
  },
  child: const Text('Submit'),
),

_formKey.currentState!.validate()ではバリデーションの検証結果がbool値で返ってきます。

バリデーションで検証エラーが発生した場合はfalseを返し、先ほどvalidatorで定義したエラーメッセージがTextFormFieldで表示されます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: const MyCustomForm(),
      ),
    );
  }
}

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '未入力です';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('テキスト入力されています')),
                );
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次