Flutterで入力フォームを作る

入力フォームの定番な、メールアドレス入力用のUIを作成してみます。

実装イメージ

サンプルコード

class EmailField extends StatelessWidget {
  final Function(String) onChanged;

  const EmailField({super.key, required this.onChanged});

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: onChanged,
      decoration: InputDecoration(
        hintText: 'メールアドレス',
        prefixIcon: const Icon(Icons.mail),
        filled: true,
        fillColor: Colors.white.withValues(alpha: 0.6),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
      keyboardType: TextInputType.emailAddress,
    );
  }
}

final Function(String) onChanged;
TextFieldの入力値を親Widgetに渡すために用意しています。

onChanged: onChanged,
これで、入力のたびに値が親に通知されます。

decoration: InputDecoration(...)
見た目などはここで設定を行います

使用方法

親Widgetで状態を管理します。
親レイアウトはStatefulWidgetにします。

String email = '';


EmailField(
  onChanged: (value) {
    setState(() {
      email = value;
    });
  },
),

以上で、入力フォームの作成は完了です。
シンプルな実装ですが、コンポーネント化することで再利用性の高いUIを作ることができます。