【Flutter】ListViewやSingleChildScrollViewの端まで来た時の波紋を消す

はじめに

AndroidでListViewを実装していて、スクロールの端まできた際に波のようなエフェクトが出ると思います。
これを取る方法について紹介します。

波紋を非表示にするには

NotificationListenerというウィジェットとOverscrollIndicatorNotificationというNotificationクラスを使います。

このNotificationListener<OverscrollIndicatorNotification>でListViewやSingleChildScrollViewをラップします。
ここで、NotificationListenerのonNotificationのコールバック関数にて、OverscrollIndicatorNotificationクラスのオブジェクトが取得できるのですが、OverscrollIndicatorNotification#disallowGlow()メソッドを呼び出します。

overscroll_indicator_notification.dart

// NotificationListenerでラップし、ジェネリックにOverscrollIndicatorNotificationを指定する
NotificationListener<OverscrollIndicatorNotification>(
  child: SingleChildScrollView(
    controller: _scrollController,
    child: Column(
      children: _buildCards(),
    ),
  ),
  onNotification: (OverscrollIndicatorNotification notification) {
    notification.disallowGlow();  // disallowGlow()を呼ぶ
    return false;
  },
),

NotificationListenerについてはこちらの記事を書きましたので、よければどうぞ。
https://qiita.com/youmeee/items/6ca30bf66646b1639076

すると、このように波紋が表示されなくなります。

まとめ

今回はListViewなどのスクロール位置が端まで来た際の波紋を消す方法について解説しました。
プロパティとかで指定できたら便利なのになあ、、
最後までご覧いただきありがとうございました。