今日はEveryDaySoft代表の永田です。
今回はFlutterのUI位置を合わせるアニメーションプログラムの作成方法について解説します。
参考コード
keyboard_animation
Flutterでは一つの入力フィールドに対して、自動でアニメーションが発生して、キーボードが開くと同時に入力フィールドの下部の位置とピッタリ合うようになっています。入力フィールドが2つある場合は下の入力フィールドがキーボードに重なります。

このような場合キーボードを一旦閉じて、下の入力フィールドにフォーカスする。もしくはスクロール機能を実装して、上にスクロールして、入力フィールドをフォーカスする動作が発生します。そこで考えたのがこのような挙動です。
機能としては、キーボードの高さ、スクロール量を取得したら発行し、アニメーションロジックを実施します。
計算方法
_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を追加しました。

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

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