Flutter_keyboard_animation

今日はEveryDaySoft代表の永田です。

今回はFlutterのUI位置を合わせるアニメーションプログラムの作成方法について解説します。

参考コード
keyboard_animation

Flutterでは一つの入力フィールドに対して、自動でアニメーションが発生して、キーボードが開くと同時に入力フィールドの下部の位置とピッタリ合うようになっています。入力フィールドが２つある場合は下の入力フィールドがキーボードに重なります。

このような場合キーボードを一旦閉じて、下の入力フィールドにフォーカスする。もしくはスクロール機能を実装して、上にスクロールして、入力フィールドをフォーカスする動作が発生します。そこで考えたのがこのような挙動です。

機能としては、キーボードの高さ、スクロール量を取得したら発行し、アニメーションロジックを実施します。

計算方法

_widgetKeyから取得している値は入力フィールドの高さです。
_widgetKeyBottomから取得している値は入力フィールドの座標です。
_containerValueは入力フィールドより下部にあるwidgetの高さです。
offsetFlgはキーボードの位置を判定します。
初回は_keyboardHeightに高さは0です。
_offsetDy >の分岐は入力フィールドが重なる位置か判定してます。
入力フィールドが重ならなければ、notifyListenersを発行します。

Widget build(BuildContext context) 内で実装してます。
キーボードの高さを取得してます。
スクロール量を取得してます。
_scrollController.notifyListeners();の判定ロジックはキーボードの高さを取得しつつ、スクロール量を取得しつつ、_animationFlgという値がfalseの時(notifyListenersが実施していない時)にnotifyListenersがを発行します。

notifyListenersを発行したら、addListenerをコールします。
_toggleFlgはSwitchボタンの判定してます。(目的は下部のUI有無です)
_containerValueは下部黒い色のUIサイズです。
アニメーション量を計算するために使用します。

Widget build(BuildContext context)内に、スクロールが停止した場合の通知をを設定する目的でNotificationListenerを追加しました。

このメソッド内が実行します。

前回のプログラムは１回キーボードを開き、サイズ等を読み込むような実装をしましたが、今回はサイズ計算中にサイズ決定した時点で通知し、アニメーションさせるというロジックにして、遅延処理をなくし、１度目の処理からアニメーション可能な作りにしました。

以上、貴重なお時間お読み下さいまして、誠にありがとうございます。