Flutter[플러터] / NotificationListener 를 사용하여 위젯의 알림을 쉽게 처리하고 사용하기 (노티피케이션리스너, 노티파이, ScrollNotification) NotificationListener (Flutter Widget of the Week)

NotificationListener class

트리 위로 올라오는 알림을 수신하는 위젯입니다.

https://youtu.be/cAnFbFoGM50

예제 코드

 

---

알림을 보내는 위젯이 있다는 것을 알고 있는가? 예를 들면 ListView 와 같은 스크롤 가능한(scrollable) 위젯은 ScrollNotifications 와 같은 알림을 보낸다. 근데 이 알림은 나무(tree)처럼 구성된 정보를 따라서 각 상위 위젯을 돌아다니는데 이렇게 발생한 알림은 어디에선가 처리가 되지 않으니 이를 처리할 필요성이 있다. 그럴 때 이러한 알림을 처리하는 일련의 동작들을 쉽게 할 수 있게 만들어주는 위젯이 있는데 바로 NotificationListener 위젯이다.

이 NotificationListener<T extends Notification> 위젯은 하위 위젯 트리에서 발생하는 Notification 이벤트를 수신하여 처리할 수 있도록 도와주고 주로 스크롤 관련 이벤트(ScrollNotification, OverscrollNotification, ScrollStartNotification 등)를 감지할 때 사용된다. 바로 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget	–	Notification을 수신할 자식 위젯
onNotification	NotificationListenerCallback<T>?	null	해당 Notification이 발생했을 때 호출되는 콜백

 

사용법은 굉장히 간단하다. 

일단 먼저 NotificationListener 위젯을 사용해 준다.

NotificationListener(
  child: Container(),
)

알림을 전달하는 위젯을 가져와 NotificationListener 를 입력하면 된다.

여기서 알아두면 좋은 점으론 이 위젯은 굳이 '상위 요소'가 될 필요는 없다는 것이다.

즉 상위 요소가 아닌 상위 개념으로만 존재해도 알림을 받아올 수 있다는 것이다.

NotificationListener(
  child: Container(
    child: ListView(), // 스크롤 알림 발생
  ),
)

이렇게 위에 위치해 있기만 해도 사용 가능하다.

그리고 이제 NotificationListener 에 제네릭(Generic, <>) 타입 매개변수를 사용하여 처리하고 싶은 알람 유형을 명시해 주면 된다.

NotificationListener<ScrollNotification>(
  child: ListView(), // 스크롤 시 ScrollNotification 발생
)

이제 다 끝났는데 하위속성인 onNotification 을 사용해 주면 된다.

NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    print('$notification');
    return true;
  },
  child: ListView(),
)

여기서 return true 는 알림이 처리가 되었다는 뜻이다.

즉 처음에 말했던 나무처리 구성된 정보에서 이제 더 이상 이 알림에 대한 정보들이 떠돌아디니지, 이동하지 않을 것이란 말이다.

이제 이렇게 하면 끝났다. 더 없다.

참고로 당연하지만 저렇게 NotificationListener 위젯에서 받을 알림 타입을 명시하게 되면 그 이외의 알림 들은 받지 않게 된다.

근데 이 위젯을 사용하려면 기본적으로 어떤 위젯이 어떠한 종류의 알림을 보내는지에 대한 사전적인 지식은 필요하게 된다.

예를 들어 현재 코드의 경우엔 ListView 를 사용 중인데 ListView 는 ScrollNotification 이라는 형태의 스크롤 관련 알림을 보내게 된다.

onNotification: (notification) {
  if (notification is ScrollStartNotification) {
    print('스크롤 시작');
  } else if (notification is ScrollUpdateNotification) {
    print('스크롤 중');
  } else if (notification is ScrollEndNotification) {
    print('스크롤 종료');
  }
  return true;
}

그 ScrollNotification 의 안에는 스크롤의 동작과 관련된 또 여러 가지의 상태 알림이 있기 때문에 위 코드처럼 notification, 즉 현재 받아오고 있는 ScrollNotification 타입의 알림을 스크롤 상태에 따른 알림과 비교하여 현재 스크롤을 시작했는지, 도중인지, 끝냈는지 알 수 있게 할 수 있다.

ScrollNotification 뿐만 아니라 다른 알림들도 마찬이기 때문에 알아두면 분명히 좋을 것이다. 아래는 ScrollNotification 에 대한 예제 코드인데 이 코드를 보면 ScrollNotification 을 사용하여 알림을 처리하고 있다는 것을 알 수 있다.

 

 

이렇게 간단하게 ScrollNotification 위젯에 대해서 알아보았다. 위젯의 알림을 받고 처리하는 것은 세밀한 동작을 해야 할 때 꼭 필요한 부분이기도 하니 사용에 익숙해지면 아주 도움이 될 것 같다. 암튼 도움이 되었길 바라며 마치겠다.