NotificationListener Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

In Flutter, every Scrollable sends Notifications that contains information about the current scroll state. Users can catch these notifications by using a NotificationListener Widget.

What is NotificationListener Widget in Flutter?

NotificationListener Widget will listen for Notifications bubbling up the tree. Notifications will trigger the onNotification callback only if their runtimeType is a subtype of T.

To dispatch notifications, use the Notification.dispatch method.

Default Constructor for it will look like below:

NotificationListener({
 Key key,
 required Widget child,
 NotificationListenerCallback onNotification,
});

In the above Constructor, all fields marked with @required must not be empty.

How to use the NotificationListener Widget in Flutter?

The following code snippet tells us how to implement a NotificationListener Widget in Flutter.

final GlobalKey _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    final Widget child = NotificationListener<ScrollStartNotification>(
      key: _key,
      child: NotificationListener<ScrollUpdateNotification>(
        child: NotificationListener<OverscrollNotification>(
          child: NotificationListener<ScrollEndNotification>(
            child: widget.child,
            onNotification: (ScrollEndNotification notification) {
              return false;
            },
          ),
          onNotification: (OverscrollNotification notification) {
            return false;
          },
        ),
        onNotification: (ScrollUpdateNotification notification) {
          return false;
        },
      ),
      onNotification: (ScrollStartNotification scrollUpdateNotification) {
        return false;
      },
    );

    return child;
  }

There are four kinds of ScrollNotifications such as listed below :

1. ScrollStartNotification: The ScrollStartNotification component starts to slide.
2. ScrollUpdateNotification: ScrollUpdateNotification component location changed.
3. ScrollEndNotification: ScrollEndNotification component has stopped scrolling.
4. OverscrollNotification: OverscrollNotification indicates that the widget has not .changed its scroll position because the change will cause the scroll position to exceed its scroll range.

Notification Listener

In Above Snippet we have wrapped the ListView.builder() with NotificationListener as a parent widget.

We have kept itemCount to 100 so means that when user scrolls within 100 the user will indirectly call a method called.

 onNotification: (scrollNotification) {
              if (scrollNotification is ScrollStartNotification) {
                _onStartScroll(scrollNotification.metrics);
              } else if (scrollNotification is ScrollUpdateNotification) {
                _onUpdateScroll(scrollNotification.metrics);
              } else if (scrollNotification is ScrollEndNotification) {
                _onEndScroll(scrollNotification.metrics);
              }
            },

Here in the above example when the user starts scrolling onNotification() method will be called.ScrollStartNotification we have called _onStartScroll(). Code Snippet will be like below :

  _onStartScroll(ScrollMetrics metrics) {
    setState(() {
      print("Scroll Start");
      message = "Scroll Start";
    });
  }

ScrollUpdateNotification we have called a method called _onUpdateScroll(). Code Snippet will look like below :

  _onUpdateScroll(ScrollMetrics metrics) {
    setState(() {
      print("Scroll Update");
      message = "Scroll Update";
    });
  }

ScrollEndNotification we have called a method called _onEndScroll(). Code Snippet will look like below :

_onEndScroll(ScrollMetrics metrics) {
    setState(() {
      print("Scroll End");
      message = "Scroll End";
    });
  }

Users will get the message according to the scrolling action. Below is a screenshot of the same.

onNotification Action

The complete Source Code will look like below :

import 'package:flutter/material.dart';

class NotificationListenerWidget extends StatefulWidget {
  @override
  _NotificationListenerWidgetState createState() =>
      _NotificationListenerWidgetState();
}

class _NotificationListenerWidgetState
    extends State<NotificationListenerWidget> {
  String message = "";

  _onStartScroll(ScrollMetrics metrics) {
    setState(() {
      print("Scroll Start");
      message = "Scroll Start";
    });
  }

  _onUpdateScroll(ScrollMetrics metrics) {
    setState(() {
      print("Scroll Update");
      message = "Scroll Update";
    });
  }

  _onEndScroll(ScrollMetrics metrics) {
    setState(() {
      print("Scroll End");
      message = "Scroll End";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: 50.0,
          color: Colors.orangeAccent,
          child: Center(
            child: Text(message),
          ),
        ),
        Expanded(
          child: NotificationListener<ScrollNotification>(
            onNotification: (scrollNotification) {
              if (scrollNotification is ScrollStartNotification) {
                _onStartScroll(scrollNotification.metrics);
              } else if (scrollNotification is ScrollUpdateNotification) {
                _onUpdateScroll(scrollNotification.metrics);
              } else if (scrollNotification is ScrollEndNotification) {
                _onEndScroll(scrollNotification.metrics);
              }
            },
            child: ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            ),
          ),
        ),
      ],
    );
  }
}

Conclusion:

In this article, we have been through What is NotificationListener Widget in Flutter along with how to implement it in a Flutter.

Still, Have Confusion with Flutter?

We will love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.