rvamsikrishna / inview_notifier_list

A Flutter package that builds a list view and notifies when the widgets are on screen.
MIT License
677 stars 104 forks source link

Inview Notifier List not working in nested ListBuilder, or in another ScrollView #12

Closed ameeratgithub closed 4 years ago

ameeratgithub commented 4 years ago

My requirement is to use ListBuilder in ScrollView. But Inview Notifier doesn't work here

Code is:-


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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final ScrollController _controller =
      ScrollController(initialScrollOffset: 0.0, keepScrollOffset: true);
  bool shouldRender(ScrollController controller) {
    return controller.offset >= (controller.position.maxScrollExtent - 100);
  }

  int length = 0;
  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (shouldRender(_controller)) {
        loadMore();
      }
    });
    length = 5;
  }

  void loadMore() async {
    await Future.delayed(Duration(seconds: 1));
    length += 5;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(

        slivers: <Widget>[
          SliverList(
              delegate: SliverChildListDelegate([
            FlatButton(
                onPressed: () {
                  print('You pressed me :)');
                },
                child: Text('Press me')),
            InViewNotifierList(
              controller: _controller,
              initialInViewIds: ['0'],
              isInViewPortCondition:
                  (double deltaTop, double deltaBottom, double vpHeight) {
                return deltaTop < (0.5 * vpHeight) &&
                    deltaBottom > (0.5 * vpHeight);
              },
              itemCount: length + 1,
              shrinkWrap: true,
              builder: (BuildContext context, int index) {
                if (index == length) {
                  return CircularProgressIndicator();
                }
                return InViewNotifierWidget(
                  id: '$index',
                  builder: (BuildContext context, bool isInView, Widget child) {
                    print('Viewing $index :$isInView');
                    return Container(
                      height: 400.0,
                      color: isInView ? Colors.green : Colors.red,
                      child: Text(
                        isInView ? '$index Is in view' : '$index Not in view',
                      ),
                    );
                  },
                );
              },
            ),
          ]))
        ],
      ),
    );
  }
}
rvamsikrishna commented 4 years ago

@ameeratgithub There is a InViewNotifierCustomScrollView widget. You can use that instead of passing InViewNotifierList into a CustomScrollView. Thank you for showing interest in the package😃.

ameeratgithub commented 4 years ago

I didn't get this. I've tried InViewNotifierCustomScrollView, but how I'll use InviewNotifierList inside this? Because it wasn't working. I've to use InviewNotifierList but how can I replace outer ScrollView?

rvamsikrishna commented 4 years ago

You can use InViewNotifierCustomScrollView as you would use a normal CustomScrollView Check out the example here

ameeratgithub commented 4 years ago

Thanks buddy a lot, working nice. I tried it now, before I did just workaround.