{"id":13465654,"url":"https://github.com/rvamsikrishna/inview_notifier_list","last_synced_at":"2026-04-04T11:11:55.905Z","repository":{"id":41234442,"uuid":"192528245","full_name":"rvamsikrishna/inview_notifier_list","owner":"rvamsikrishna","description":"A Flutter package that builds a list view and notifies when the widgets are on screen.","archived":false,"fork":false,"pushed_at":"2024-02-22T05:01:13.000Z","size":139,"stargazers_count":665,"open_issues_count":23,"forks_count":103,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-07-31T15:01:38.630Z","etag":null,"topics":["autoplay","flutter","listview","notification","package","scroll","video"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rvamsikrishna.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-18T11:38:01.000Z","updated_at":"2024-07-29T09:15:11.000Z","dependencies_parsed_at":"2024-01-02T22:52:18.517Z","dependency_job_id":"1ca66622-b58b-4c5f-9113-7422fabd08c7","html_url":"https://github.com/rvamsikrishna/inview_notifier_list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvamsikrishna%2Finview_notifier_list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvamsikrishna%2Finview_notifier_list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvamsikrishna%2Finview_notifier_list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvamsikrishna%2Finview_notifier_list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rvamsikrishna","download_url":"https://codeload.github.com/rvamsikrishna/inview_notifier_list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245500417,"owners_count":20625575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoplay","flutter","listview","notification","package","scroll","video"],"created_at":"2024-07-31T15:00:33.359Z","updated_at":"2026-04-04T11:11:55.888Z","avatar_url":"https://github.com/rvamsikrishna.png","language":"Dart","funding_links":[],"categories":["Components","Dart","组件","UI [🔝](#readme)"],"sub_categories":["UI"],"readme":"# **inview_notifier_list**\r\n\r\n[![pub package](https://img.shields.io/pub/v/inview_notifier_list.svg)](https://pub.dev/packages/inview_notifier_list)\r\n[![CI](https://github.com/rvamsikrishna/inview_notifier_list/actions/workflows/ci.yml/badge.svg)](https://github.com/rvamsikrishna/inview_notifier_list/actions/workflows/ci.yml)\r\n[![codecov](https://codecov.io/gh/rvamsikrishna/inview_notifier_list/branch/master/graph/badge.svg)](https://codecov.io/gh/rvamsikrishna/inview_notifier_list)\r\n\r\nA Flutter package that builds a [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html) or [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) and notifies when the widgets are on screen within a provided area.\r\n\r\n|                                                            Example 1                                                             |                                                              Example 2                                                              |                                                     Example 3(Auto-play video)                                                      |\r\n| :------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: |\r\n| ![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/31307345/59602739-2f022d00-9125-11e9-84ef-19a33f8bd782.gif) | ![ezgif com-video-to-gif (1)](https://user-images.githubusercontent.com/31307345/59602740-2f022d00-9125-11e9-8ee6-044e44f6048f.gif) | ![ezgif com-video-to-gif (2)](https://user-images.githubusercontent.com/31307345/59602744-2f9ac380-9125-11e9-8a8f-7e68bdc27c16.gif) |\r\n|                                                **Example 4(Custom Scroll View)**                                                 |                                                                                                                                     |                                                                                                                                     |\r\n|       ![csv_example](https://user-images.githubusercontent.com/31307345/78342587-22b56680-75b7-11ea-8f6e-22a8f378546d.gif)       |                                                                                                                                     |                                                                                                                                     |\r\n\r\n## Index\r\n\r\n- [Use cases](https://github.com/rvamsikrishna/inview_notifier_list#use-cases)\r\n- [Installation](https://github.com/rvamsikrishna/inview_notifier_list#installation)\r\n- [Basic Usage](https://github.com/rvamsikrishna/inview_notifier_list#basic-usage)\r\n- [Types of Notifiers](https://github.com/rvamsikrishna/inview_notifier_list#types-of-notifiers)\r\n- [Properties](https://github.com/rvamsikrishna/inview_notifier_list#properties)\r\n- [Credits](https://github.com/rvamsikrishna/inview_notifier_list#credits)\r\n\r\n## Use-cases\r\n\r\n- To auto-play a video when a user scrolls.\r\n\r\n- To add real-time update listeners from database to the posts/content only within an area visible to the user.\r\n\r\n  \u003e Note: If you have other use cases please update this section and create a PR.\r\n\r\n## Installation\r\n\r\nJust add the package to your dependencies in the `pubspec.yaml` file:\r\n\r\n```yaml\r\ndependencies:\r\n  inview_notifier_list: ^4.0.1\r\n```\r\n\r\n## Basic Usage\r\n\r\n###### Step 1:\r\n\r\nAdd the `InViewNotifierList` to your widget tree\r\n\r\n```dart\r\nimport 'package:flutter/material.dart';\r\nimport 'package:inview_notifier_list/inview_notifier_list.dart';\r\n\r\nclass MyApp extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      body: InViewNotifierList(\r\n\t\t...\r\n      ),\r\n    );\r\n  }\r\n}\r\n\r\n```\r\n\r\n###### Step 2:\r\n\r\nAdd the [required](https://api.flutter.dev/flutter/meta/required-constant.html) property `isInViewPortCondition` to the `InViewNotifierList` widget. This is the function that defines the area which the widgets overlap should be notified as currently in-view.\r\n\r\n```dart\r\ntypedef IsInViewPortCondition = bool Function(\r\n  double deltaTop,\r\n  double deltaBottom,\r\n  double viewPortDimension,\r\n);\r\n\r\n```\r\n\r\nIt takes 3 parameters:\r\n\r\n1. **deltaTop**: It is the distance from top of the widget to be notified in the list view to top of the viewport(0.0).\r\n\r\n2. **deltaBottom**: It is the distance from bottom of the widget to be notified in the list view to top of the viewport(0.0).\r\n\r\n3. **viewPortDimension**: The height or width of the viewport depending on the `srollDirection` property provided. The image below showcases the values if the `srollDirection` is `Axis.vertical`.\r\n\r\n   ![Untitled Diagram](https://user-images.githubusercontent.com/31307345/59606620-3c241980-912f-11e9-8c63-3029661c76ac.jpg)\r\n\r\nHere is an example that returns `true` only when the widget's top is above the halfway of the viewport and the widget's bottom is below the halfway of the viewport. It is shown in [example1](https://github.com/rvamsikrishna/inview_notifier_list/blob/master/example/lib/my_list.dart#L24).\r\n\r\n```dart\r\nInViewNotifierList(\r\n  isInViewPortCondition:\r\n      (double deltaTop, double deltaBottom, double viewPortDimension) {\r\n    return deltaTop \u003c (0.5 * viewPortDimension) \u0026\u0026\r\n        deltaBottom \u003e (0.5 * viewPortDimension);\r\n  },\r\n),\r\n\r\n```\r\n\r\n###### step 3:\r\n\r\nAdd the [IndexedWidgetBuilder](https://api.flutter.dev/flutter/widgets/IndexedWidgetBuilder.html) , which builds the children on demand. It is just like the [ListView.builder](https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html).\r\n\r\n```dart\r\nInViewNotifierList(\r\n    isInViewPortCondition:(...){...},\r\n    itemCount: 10,\r\n    builder: (BuildContext context, int index) {\r\n      return child;\r\n    }\r\n\r\n),\r\n```\r\n\r\n###### step 4:\r\n\r\nUse the `InViewNotifierWidget` to get notified if the required widget is currently in-view or not.\r\n\r\nThe `InViewNotifierWidget` consists of the following properties:\r\n\r\n1. `id`: a **required** String property. This should be unique for every widget that wants to get notified.\r\n2. `builder` : Signature for a function that creates a widget for a given index. The function that defines and returns the widget that should be notified as inView. See [InViewNotifierWidgetBuilder](https://pub.dev/documentation/inview_notifier_list/latest/inview_notifier_list/InViewNotifierWidgetBuilder.html).\r\n3. `child`: The child widget to pass to the builder.\r\n\r\n```dart\r\nInViewNotifierWidget(\r\n  id: 'unique-Id',\r\n  builder: (BuildContext context, bool isInView, Widget child) {\r\n    return Container(\r\n      child: Text(\r\n        isInView ? 'in view' : 'not in view',\r\n      ),\r\n    );\r\n  },\r\n)\r\n```\r\n\r\nThat's it, done!\r\n\r\nA complete code:\r\n\r\n```dart\r\nInViewNotifierList(\r\n  isInViewPortCondition:\r\n      (double deltaTop, double deltaBottom, double vpHeight) {\r\n    return deltaTop \u003c (0.5 * vpHeight) \u0026\u0026 deltaBottom \u003e (0.5 * vpHeight);\r\n  },\r\n  itemCount: 10,\r\n  builder: (BuildContext context, int index) {\r\n    return InViewNotifierWidget(\r\n      id: '$index',\r\n      builder: (BuildContext context, bool isInView, Widget child) {\r\n        return Container(\r\n          height: 250.0,\r\n          color: isInView ? Colors.green : Colors.red,\r\n          child: Text(\r\n            isInView ? 'Is in view' : 'Not in view',\r\n          ),\r\n        );\r\n      },\r\n    );\r\n  },\r\n);\r\n\r\n```\r\n\r\nRun the [example](https://github.com/rvamsikrishna/inview_notifier_list/tree/master/example) app provided and check out the folder for complete code.\r\n\r\n## Types of Notifiers\r\n\r\n1. [InViewNotifierList](https://pub.dev/documentation/inview_notifier_list/latest/inview_notifier_list/InViewNotifierList-class.html): builds a [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html) and notifies when the widgets are on screen within a provided area.\r\n2. [InViewNotifierCustomScrollView](https://pub.dev/documentation/inview_notifier_list/latest/inview_notifier_list/InViewNotifierCustomScrollView-class.html): builds a [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) and notifies when the widgets are on screen within a provided area.\r\n\r\n## Properties\r\n\r\n- `isInViewPortCondition`: [**Required**] The function that defines the area within which the widgets should be notified as in-view.\r\n\r\n- `initialInViewIds`: The String list of unique ids of the child widgets that should be initialized as in-view when the list view is built for the first time.\r\n\r\n- `endNotificationOffset`: The distance from the bottom of the list where the `onListEndReached` should be invoked. Defaults to the end of the list i.e 0.0.\r\n\r\n- `onListEndReached`: The function that is invoked when the list scroll reaches the end or the `endNotificationOffset` if provided.\r\n\r\n- `throttleDuration`: The duration to be used for throttling the scroll notification. Defaults to 200 milliseconds.\r\n\r\n- `scrollDirection`: The axis along which the scroll view scrolls.\r\n\r\n##### Credits:\r\n\r\nThanks to [Didier Boelens](https://www.didierboelens.com/) for the raw solution.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvamsikrishna%2Finview_notifier_list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frvamsikrishna%2Finview_notifier_list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvamsikrishna%2Finview_notifier_list/lists"}