Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ameeratgithub opened this issue Apr 27, 2020 · 4 comments

Comments

@ameeratgithub
Copy link

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
Copy link
Owner

@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
Copy link
Author

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
Copy link
Owner

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

@ameeratgithub
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants