【Flutter】メールアドレス入力用のTextFieldを作る

新規登録やログインなどで汎用的に使えるようにしておきたいな、と思ったのでメールアドレス入力用のTextFieldウィジェットを作ってみました。

flutter doctor 実行環境

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.1 22C65 darwin-x64, locale ja-JP)

[✓] Android toolchain – develop for Android devices (Android SDK version 30.0.3)

[✓] Xcode – develop for iOS and macOS (Xcode 14.2)

[✓] Chrome – develop for the web

[✓] Android Studio (version 2020.3)

[✓] VS Code (version 1.74.3)

Email入力用のTextFieldを作る

EmailTextField コード全文

import 'package:flutter/material.dart';

class EmailTextField extends StatelessWidget {
  final TextEditingController controller;
  final TextInputAction? textInputAction;
  final void Function(String)? onChanged;
  final void Function(String)? onSubmitted;
  final void Function(bool)? onFocusChange;

  const EmailTextField({
    super.key,
    required this.controller,
    this.textInputAction,
    this.onChanged,
    this.onSubmitted,
    this.onFocusChange,
  });

  @override
  Widget build(BuildContext context) {
    return Focus(
      onFocusChange: onFocusChange,
      child: TextField(
        controller: controller,
        decoration: const InputDecoration(
          labelText: 'メールアドレス',
          hintText: 'mail@example.com',
        ),
        keyboardType: TextInputType.emailAddress,
        textInputAction: textInputAction,
        onChanged: onChanged,
        onSubmitted: onSubmitted,
      ),
    );
  }
}

EmailTextFieldの引数

final TextEditingController controller;
- コントローラーは外部（Pageなど）から渡してもらう想定で作っています。
final TextInputAction? textInputAction;
- 必須ではないですが、確定ボタンを押した時にパスワード入力などにフォーカスを移したい時はTextInputAction.nextを指定したりすると良いと思います。
final void Function(String)? onChanged;
- 入力変更検知用に用意しています。入力する度にバリデーションしたい場合などに使うと良いと思います。
final void Function(String)? onSubmitted;
- 入力確定の検知用です。こちらもバリデーションなどに使えるでしょう。
final void Function(bool)? onFocusChange;
- フォーカスされた時や外れた時の検知用です。

中身のTextField

decoration: const InputDecoration
- タイトルラベルとヒントテキスト（プレースホルダー）は固定にしていますが引数をとっても良いかと思います。
keyboardType: TextInputType.emailAddress
- ソフトウェアキーボードがメールアドレス入力用になります。

使い方

Pageに設置した時の例です（実際は他のWidgetと組み合わせると思いますがここでは簡略化しています）。

class SignUpPage extends StatelessWidget {
  final _emailController = TextEditingController();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: EmailTextField(
        controller: _emailController,
        textInputAction: TextInputAction.next,
        onChanged: (value) {
          _validate(value);
        },
        onFocusChange: (hasFocus) {
          if (!hasFocus) {
            フォーカスが外れた時...
          }
        },
      ),
    );
  }

  void _validate(String email) {
    何かバリデーションを行ったりする...
  }
}

【Flutter】メールアドレス入力用のTextFieldを作る