Expose InViewNotifier to support customized widget #47

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [3.1.0] - 11th March 2022.
+
+- Expose `InViewNotifier` to support customized `Widget` (e.g. `SmartRefresher`)
+- Add `InViewNotifier.of` to read `InViewState`
+
+**Breaking Changes**
+
+- Remove `InViewNotifierList.of` and `InViewNotifierCustomScrollView.of`
+
 ## [3.0.0] - 28th December 2021.
 
 **Breaking Changes**

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:example/csv_example.dart';
+import 'package:example/refresh_list.dart';
 import 'package:flutter/material.dart';
 
 import 'my_list.dart';
@@ -27,6 +28,7 @@ class _HomePageState extends State<HomePage> {
   final List<Tab> myTabs = <Tab>[
     Tab(text: 'Example 1'),
     Tab(text: 'Example 2'),
+    Tab(text: 'Refresh List'),
     Tab(text: 'Autoplay Video'),
     Tab(text: 'Custom Scroll View'),
   ];
@@ -41,6 +43,7 @@ class _HomePageState extends State<HomePage> {
           title: Text('ÍnViewNotifierList'),
           centerTitle: true,
           bottom: TabBar(
+            isScrollable: true,
             tabs: myTabs,
           ),
         ),
@@ -66,6 +69,7 @@ class _HomePageState extends State<HomePage> {
                 color: Colors.redAccent.withOpacity(0.2),
               ),
             ),
+            RefreshList(),
             VideoList(),
             CSVExample(),
           ],

example/lib/refresh_list.dart

@@ -0,0 +1,105 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:inview_notifier_list/inview_notifier_list.dart';
+import 'package:pull_to_refresh/pull_to_refresh.dart';
+
+class RefreshList extends StatefulWidget {
+  const RefreshList({Key? key}) : super(key: key);
+
+  @override
+  State<RefreshList> createState() => _RefreshListState();
+}
+
+class _RefreshListState extends State<RefreshList> {
+  final _refreshController = RefreshController(initialRefresh: true);
+
+  final data = <int>[];
+
+  int get nextInt => Random().nextInt(1000);
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void onLoading() {
+    Future.delayed(const Duration(milliseconds: 500), () {
+      data.addAll(List.generate(10, (i) => nextInt));
+      _refreshController.loadComplete();
+      setState(() {});
+    });
+  }
+
+  void onRefresh() {
+    Future.delayed(const Duration(milliseconds: 500), () {
+      data.clear();
+      data.addAll(List.generate(10, (_) => nextInt));
+      _refreshController.refreshCompleted();
+      setState(() {});
+    });
+  }
+
+  bool _conditaion(double deltaTop, double deltaBottom, double vpHeight) {
+    // return deltaTop < (0.5 * vpHeight) && deltaBottom > (0.5 * vpHeight);
+    return (deltaTop < (0.5 * vpHeight) + 100.0 &&
+        deltaBottom > (0.5 * vpHeight) - 100.0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        InViewNotifier(
+          isInViewPortCondition: _conditaion,
+          child: SmartRefresher(
+            controller: _refreshController,
+            enablePullDown: true,
+            enablePullUp: true,
+            onLoading: onLoading,
+            onRefresh: onRefresh,
+            child: ListView.builder(
+              itemCount: data.length,
+              itemBuilder: (_, i) {
+                final item = data[i];
+                return InViewNotifierWidget(
+                  id: '$i',
+                  builder: (_, inView, child) {
+                    if (!inView) {
+                      return child!;
+                    }
+                    return Container(
+                      padding: const EdgeInsets.all(8),
+                      child: child,
+                    );
+                  },
+                  child: Container(
+                    alignment: Alignment.center,
+                    child: Text(
+                      '$item',
+                      style: TextStyle(
+                        fontSize: 32,
+                      ),
+                    ),
+                    height: 100,
+                    color: i.isOdd ? Colors.green : Colors.blue,
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+        IgnorePointer(
+          ignoring: true,
+          child: Align(
+            alignment: Alignment.center,
+            child: Container(
+              color: Colors.red.withOpacity(0.2),
+              height: 200,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

example/pubspec.yaml

@@ -24,6 +24,7 @@ dependencies:
   inview_notifier_list:
     path: ../
   video_player: ^2.2.10
+  pull_to_refresh: ^2.0.0
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.

lib/inview_notifier_list.dart

@@ -1,3 +1,3 @@
 export 'src/inview_notifier_list.dart';
 export 'src/inview_state.dart';
-export 'src/inview_notifier.dart' hide InViewNotifier;
+export 'src/inview_notifier.dart';

lib/src/inview_notifier.dart

@@ -14,7 +14,7 @@ class InViewNotifier extends StatefulWidget {
   final List<String> initialInViewIds;
 
   ///The widget that should be displayed in the [InViewNotifier].
-  final ScrollView child;
+  final Widget child;
 
   ///The distance from the bottom of the list where the [onListEndReached] should be invoked.
   final double endNotificationOffset;
@@ -41,13 +41,20 @@ class InViewNotifier extends StatefulWidget {
     this.endNotificationOffset = 0.0,
     this.onListEndReached,
     this.throttleDuration = const Duration(milliseconds: 200),
+    this.scrollDirection = Axis.vertical,
     required this.isInViewPortCondition,
   })  : assert(endNotificationOffset >= 0.0),
-        scrollDirection = child.scrollDirection,
         super(key: key);
 
   @override
   _InViewNotifierState createState() => _InViewNotifierState();
+
+  static InViewState? of(BuildContext context) {
+    final widget = context
+        .getElementForInheritedWidgetOfExactType<InheritedInViewWidget>()!
+        .widget as InheritedInViewWidget;
+    return widget.inViewState;
+  }
 }
 
 class _InViewNotifierState extends State<InViewNotifier> {

lib/src/inview_notifier_list.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:inview_notifier_list/src/inview_notifier.dart';
 
-import 'inherited_inview_widget.dart';
 import 'inview_state.dart';
 
 ///builds a [ListView] and notifies when the widgets are on screen within a provided area.
@@ -34,6 +33,7 @@ class InViewNotifierList extends InViewNotifier {
           onListEndReached: onListEndReached,
           throttleDuration: throttleDuration,
           isInViewPortCondition: isInViewPortCondition,
+          scrollDirection: scrollDirection,
           child: ListView.builder(
             padding: padding,
             controller: controller,
@@ -47,13 +47,6 @@ class InViewNotifierList extends InViewNotifier {
             itemBuilder: builder,
           ),
         );
-
-  static InViewState? of(BuildContext context) {
-    final InheritedInViewWidget widget = context
-        .getElementForInheritedWidgetOfExactType<InheritedInViewWidget>()!
-        .widget as InheritedInViewWidget;
-    return widget.inViewState;
-  }
 }
 
 ///builds a [CustomScrollView] and notifies when the widgets are on screen within a provided area.
@@ -87,6 +80,7 @@ class InViewNotifierCustomScrollView extends InViewNotifier {
           onListEndReached: onListEndReached,
           throttleDuration: throttleDuration,
           isInViewPortCondition: isInViewPortCondition,
+          scrollDirection: scrollDirection,
           child: CustomScrollView(
             slivers: slivers,
             anchor: anchor,
@@ -99,13 +93,6 @@ class InViewNotifierCustomScrollView extends InViewNotifier {
             center: center,
           ),
         );
-
-  static InViewState? of(BuildContext context) {
-    final InheritedInViewWidget widget = context
-        .getElementForInheritedWidgetOfExactType<InheritedInViewWidget>()!
-        .widget as InheritedInViewWidget;
-    return widget.inViewState;
-  }
 }
 
 ///The widget that gets notified if it is currently inside the viewport condition
@@ -157,7 +144,7 @@ class _InViewNotifierWidgetState extends State<InViewNotifierWidget> {
   @override
   void initState() {
     super.initState();
-    state = InViewNotifierList.of(context)!;
+    state = InViewNotifier.of(context)!;
     state.addContext(context: context, id: widget.id);
   }
 

pubspec.yaml

@@ -1,6 +1,6 @@
 name: inview_notifier_list
 description: A Flutter package that builds a listview and notifies when the widgets are on screen.
-version: 3.0.0
+version: 3.1.0
 # author: Vamsi Krishna <[email protected]>
 homepage: https://github.com/rvamsikrishna/inview_notifier_list