Flutter Bubbling

今日はEveryDaySoft代表の永田です。8月から久しぶりの投稿になります。

  • サンプルコード
  • 8月以降もFlutterを中心に企業案件に参画していました。
  • 来年もFlutter案件を実施します。
  • 表題のBubblingについて、解説します。

バブリングの仕組み

  1. 通知の生成: 子ウィジェットがScrollNotificationなどの通知を生成します。
  2. 通知の伝播: この通知は、ウィジェットツリーを上向きに(子から親へ)伝播します。
  3. 通知の捕捉: NotificationListenerウィジェットは、この通知を捕捉し、指定されたonNotificationコールバックを実行します。
  4. 通知の処理: onNotificationコールバック内で通知を処理し、trueを返すと通知はその場で停止し、falseを返すと更に上の親ウィジェットへ伝播します。

メリット

  1. イベントの階層的管理: ウィジェットツリーの階層に沿ってイベントを管理できるため、複雑なウィジェット構造でもイベントの流れを理解しやすい。
  2. コードの分離と再利用性: 特定のイベントを特定のレベルで捕捉し処理することで、コードの分離と再利用性が向上します。
  3. カスタムイベントの柔軟性: カスタム通知を作成し、ウィジェット間で情報を伝えることが可能です。

デメリット

  1. イベントの不透明性: イベントがどこで捕捉され、どのように処理されるかがコード上では直感的でない場合があります。
  2. パフォーマンスの影響: 大量の通知が発生し、多くのウィジェットで捕捉される場合、パフォーマンスに影響を与える可能性があります。
  3. 複雑性の増加: 特に大きなウィジェットツリーでは、通知の流れを追跡し管理することが複雑になることがあります。

 

  • バブリングは、特にウィジェットツリーの異なるレベル間でのイベントの伝播や管理において有用なメカニズムですが、その使用は適切な状況と要件に基づいて検討する必要があります。
  • 複雑なアニメーション、複数のアニメーションを実行するPackageのような機能の場合にバブリングを使用して、伝播のフローを作っておくと実行を追うことが容易になると思います。

以上、貴重なお時間お読みくださいまして、誠に有難うございます。