inview_notifier_list 0.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

inview_notifier_list #

A Flutter package that builds a ListView and notifies when the widgets are on screen within a provided area.

Example 1Example 2Example 3(Auto-play video)
ezgif com-gif-maker (1)ezgif com-video-to-gif (1)ezgif com-video-to-gif (2)

Use-cases #

  • To auto-play a video when a user scrolls.

  • To add real-time update listeners from database to the posts/content only within an area visible to the user.

    Note: If you have other use cases please update this section and create aPR.

Installation #

Just add the package to your dependencies in the pubspec.yaml file:

dependencies:
  inview_notifier_list: ^0.0.3

Basic Usage #

Step 1: #

Add the InViewNotifierList to your widget tree

import 'package:flutter/material.dart';
import 'package:inview_notifier_list/inview_notifier_list.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InViewNotifierList(
		...
      ),
    );
  }
}

Step 2: #

Add the required 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.

typedef bool IsInViewPortCondition(
  double deltaTop,
  double deltaBottom,
  double viewPortDimension,
);

It takes 3 parameters:

  1. deltaTop: It is the distance from top of the widget to be notified in the list view to top of the viewport(0.0).

  2. deltaBottom: It is the distance from bottom of the widget to be notified in the list view to top of the viewport(0.0).

  3. 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.

    Untitled Diagram

Here 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.

InViewNotifierList(
  isInViewPortCondition:
      (double deltaTop, double deltaBottom, double viewPortDimension) {
    return deltaTop < (0.5 * viewPortDimension) &&
        deltaBottom > (0.5 * viewPortDimension);
  },
),

step 3: #

Add the widgets to be displayed in the list view to the children property.

InViewNotifierList(
    isInViewPortCondition:(...){...},
    children: <Widget>[
        ListChild(...),
        ListChild(...),
        ListChild(...),
        ...
    ],
),
step 4: #

Add the widget's context and its String id to the InViewState that you want to be notified whether it is in-view or not.

The InViewState can be accessed by calling the of method of InViewNotifierList anywhere below the InViewNotifierList widget tree as follows:

InViewState state = InViewNotifierList.of(context);

Use state to add context for notification.

class ListChild extends StatelessWidget {
  final String id;

  const ListChild({Key key,@required this.id}) : super(key: key);
  @override
  Widget build(BuildContext context) {
      
    InViewState state = InViewNotifierList.of(context);
    state.addContext(context: context, id: id);

    return Container(
      ...
    );
  }
}
Step 5: #

Wrap the widget you want to get notified with an AnimatedBuilder passing the above mentioned InViewState to the animation property.

Then use the InViewState's inView method which takes in the String id as an argument to check if the required widget is currently in-view or not.

Widget build(BuildContext context) {
  InViewState state = InViewNotifierList.of(context);
  state.addContext(context: context, id: id);
  return AnimatedBuilder(
    animation: state,
    builder: (BuildContext context, Widget child) {
      final bool inView = state.inView(id);
      return Container(
        child: Text(inView ? 'Is in View' : 'Not in View'),
      );
    },
  );
}

You can do the same using an AnimatedWidget.

That's it, done! Run the example app provided and check out the folder for complete code.

Properties #

  • isInViewPortCondition: [Required] The function that defines the area within which the widgets should be notified as in-view.
  • children: *The widgets that should be displayed in the list view.
  • 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.
  • contextCacheCount: The number of widget's contexts the InViewNotifierList should stored/cached for the calculations thats needed to be done to check if the widgets are in-view or not. Defaults to 10 and should be greater than 1. This is done to reduce the number of calculations being performed.
  • 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.
  • onListEndReached: The function that is invoked when the list scroll reaches the end or the endNotificationOffset if provided.
  • throttleDuration: The duration to be used for throttling the scroll notification. Defaults to 200 milliseconds.
  • scrollDirection: The axis along which the scroll view scrolls. Defaults to Axis.vertical.
  • controller: An object that can be used to control the position to which this scroll view is scrolled. See ScrollController.
  • padding: The amount of space by which to inset the children.
  • physics: How the scroll view should respond to user input. See ScrollPhysics.
Credits: #

Thanks to Didier Boelens for the raw solution.

[0.0.3] - 10th September 2019.

Added two extra properties padding and physics.

[0.0.1] - 18th June 2019.

A Flutter package that builds a ListView and notifies when the widgets are on screen within a provided area.

[0.0.1+1] - 19th June 2019.

Breaking- Fixed the typo for the property name from srollDirection to scrollDirection.

Before(v0.0.1):

InViewNotifierList(
  srollDirection: Axis.vertical,
)

After(v0.0.2):

InViewNotifierList(
  scrollDirection: Axis.vertical,
)
`

example/README.md

example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  inview_notifier_list: ^0.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:inview_notifier_list/inview_notifier_list.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
77
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Nov 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/inview_notifier_list.dart. (-0.50 points)

Analysis of lib/inview_notifier_list.dart reported 1 hint:

line 142 col 25: This function has a return type of 'bool', but doesn't end with a return statement.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
stream_transform ^0.0.19 0.0.19 0.0.20
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_driver
flutter_test
test any