scrollview_observer 1.0.0

Gets all the child widgets those are displaying in listView.

Flutter ScrollView Observer

Language: English | 中文 | Article

This is a library of widget that can be used to listen for child widgets those are being displayed in the scroll view.

Support

• ✅ ListView
• ✅ SliverList
• ✅ GridView
• ✅ SliverGrid

Installing

Add scrollview_observer to your pubspec.yaml file:

dependencies:
  scrollview_observer: latest_version

Import scrollview_observer in files that it will be used:

import 'package:scrollview_observer/scrollview_observer.dart';

Getting Started

Take ListView as an example

Parameter description of ListViewObserver:

Parameter	Required	Description
child	yes	Create [ListView] as a child of [ListViewObserver]
sliverListContexts	no	In this callback, we need to return all [BuildContext] of the [ListView] those needs to be observed. This property is only used when [BuildContext] needs to be specified exactly
onObserve	no	This callback can listen for information about the child widgets those are currently being displayed in the current first [Sliver]
onObserveAll	no	This callback can listen for information about all the children of slivers that are currently being displayed. This callback is only needed when there are more than one [Sliver]

Method 1: General (Recommended)

It is relatively simple to use and has a wide application range. In general, only this method is needed

Build ListViewObserver and pass the ListView instance to the child parameter

ListViewObserver(
  child: _buildListView(),
  onObserve: (resultModel) {
    print('firstChild.index -- ${resultModel.firstChild?.index}');
    print('displaying -- ${resultModel.displayingChildIndexList}');
  },
)

By default, ListView relevant data will only be observed when scrolling.

If needed, you can use ListObserverController triggered an observation manually.

// Create an instance of [ListObserverController]
ListObserverController controller = ListObserverController();
...

// Pass the controller instance to the 'controller' parameter of 'ListViewObserver'
ListViewObserver(
  ...
  controller: controller,
  ...
)
...

// Trigger an observation manually.
controller.dispatchOnceObserve();

Method 2: Specify BuildContext for Sliver

Relatively complex to use, the scope of application is small, there are more than one Sliver is possible to use this method

Detailed instructions

BuildContext? _sliverListViewContext;

Create a ListView and record BuildContext in its builder callback

ListView _buildListView() {
  return ListView.separated(
    itemBuilder: (ctx, index) {
      if (_sliverListViewContext != ctx) {
        _sliverListViewContext = ctx;
      }
      ...
    },
    ...
  );
}

Create ListViewObserver

ListViewObserver(
  child: _buildListView(),
  sliverListContexts: () {
    return [if (_sliverListViewContext != null) _sliverListViewContext!];
  },
  onObserve: (resultMap) {
    final model = resultMap[_sliverListViewContext];
    if (model == null) return;

    // Prints the first child widget index that is currently being displayed
    print('firstChild.index -- ${model.firstChild?.index}');

    // Prints the index of all child widgets those are currently being displayed
    print('displaying -- ${model.displayingChildIndexList}');
  },
)

By default, ListView relevant data will only be observed when scrolling.

If needed, you can use ListViewOnceObserveNotification triggered an observation manually.

ListViewOnceObserveNotification().dispatch(_sliverListViewContext);

Example

About Me

• GitHub: https://github.com/LinXunFeng
• Email: [e-mail]
• Blogs:
  • 全栈行动: https://fullstackaction.com
  • 掘金: https://juejin.cn/user/1820446984512392