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

環境

# 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‎ で実現できること

現在は beta で確認できます。

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

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

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

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

Flutter の Form を拡張した flutter_form_builder パッケージには、field のリストを提供するゲッターが用意されている。

ソースコード

実践

スクロールには、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),
    );
  }
}

参考

• 提案された Issue
  • https://github.com/flutter/flutter/issues/135363
• PR
  • https://github.com/flutter/flutter/pull/135578