Zenn
🔖

Flutter 3.20 以降で追加される validateGranularly‎ で、Form バリデーションのエラー箇所へスクロール

2024/03/12に公開
Flutter
Dart
tech

環境

# Flutter
3.20.0-1.2.pre

# Dart
3.4.0

いろいろ試したソースコード

https://github.com/Zudah228/flutter_beta_playground/blob/main/lib/pages/form/form_playground_page.dart

FormState.validateGranularly‎ で実現できること

バリデーション実行後に、エラー発生箇所へスクロールする機能がスッキリ書ける。

FormState.validate でバリデーションを実行する際、これまで、戻り値は true/false のみで、詳細なフィールドの状態は取得できませんでした。

さらに、Flutter の FormState には、登録した field のリストを提供する public な関数やゲッターが提供されていません。

もしエラー箇所へのスクロールを実現するなら、Form 拡張パッケージを利用するか、FormField 全てに GlobalKey を与えて、errorText が含まれる Field を特定するなどするしかありませんでした（二度の計算になって非効率）。
もしくは、FormState クラスを拡張するかですね。

実践

スクロールには、Scrollable.of(context).ensureVisible を使います（BuildContext 渡すだけで、それが見えるまでスクロールしてくれるやつ）。

void validate() {
  // validateGranularly の実行
  final invalidFields = _formKey.currentState!.validateGranularly();

  // invalidFields が１つでも存在すれば、先頭のフィールドへスクロール
  if (invalidFields.firstOrNull case final firstInvalidateField?) {
    Scrollable.ensureVisible(
      firstInvalidateField.context,
      duration: const Duration(milliseconds: 240),
    );
  }
}

参考

Discussion