[Flutter]Cupertino(iOS風)のTextFieldでバリデーション(validation)をするには？

どうも、ちょげ(@chogetarou)です。

CupertinoのTextFieldでバリデーションをする方法を紹介します。

方法
使用例

方法

CupertinoのTextFieldでバリデーションをするには、CupertinoTexFormFieldRowを使います。

具体的には、CupertinoTextFormFieldRowを配置し、その引数「validator」にバリデーションの関数を指定します。

CupertinoTextFormFieldRow(
  validator: (String? value) {
    //バリデーション
  },
),

これでCupertinoのTextFieldでバリデーションをすることが出来ます。

CupertinoTextFieldRowは、デフォルトでは何の装飾もされていません。

なので、背景色や枠線、影などを引数「decoration」を使って設定する必要があります。

使用例

以下は、使用例です。

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CupertinoTextFormFieldRow(
                  decoration: BoxDecoration(
                    color: Colors.blue[100],
                  ),
                  validator: (String? value) {
                    if (value == null || value.length < 5) {
                      return 'Error';
                    }

                    return null;
                  },
                ),
                ElevatedButton(
                  onPressed: () => _formKey.currentState?.validate(),
                  child: Text('Validate'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }