【Flutter】TextFormFieldで入力フォームにバリデーションを実装

2023年11月26日

この記事はこんな人におすすめ！

Flutterで入力フォームにバリデーションを実装したい
TextFormFieldの使い方が知りたい

「Flutterでバリデーション付きの入力フォームを実装するにはどうするの？」

今回はFlutterでバリデーション付きの入力フォームを実装できるTextFormFieldの使い方について解説していきます。本記事の内容はFluter公式のCookbookの手順を参考にしています。

TextFormFieldとは？

TextFormFieldはバリデーションチェックを行える入力フォームを実装できるウィジェットです。

ステップ１：FormとGlobalKeyを連携させる

それではTextFormFieldの使い方を紹介していきます。

StatefulWidgetでGlobalKeyを定数として定義し、Formのkeyの引数としてGlobalKeyを渡します。

今回は_formKeyでGlobalKeyを定義しています。

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: ...
    );
  }
}

ステップ２：TextFormFieldとバリデーションを作成

Form内でTextFormFieldを作成しvalidatorで次のようにバリデーションの処理を指定できます。

バリデーションを実行しエラーが発生した場合のエラー文をString型でreturnで指定し、問題がなかった場合はreturnでnullを返すようにします。

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '文字を入力をしてください';
    }
    return null;
  },
),

ステップ３：入力フォームで入力した値を取得

先ほどTextFormFieldで作成したバリデーションを実行するには_formKey.currentState!.validate()を呼び出します。

_formKey.currentState!.validate()が実行されるとバリデーションを行いエラーが出た場合はfalseを返し、問題がない場合はtrueを返します。

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('文字が入力されています')),
      );
    }
  },
  child: const Text('入力チェック'),
),

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  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('入力チェック'),
          ),
        ],
      ),
    );
  }
}

まとめ

今回はTextFormFieldを使用して入力フォームを実装する方法を紹介します。

TextFormFieldに似たTextFieldもあるのでぜひ一緒にチェックしてみてください。

参考サイト

https://docs.flutter.dev/cookbook/forms/validation