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

Ability to use with pagination. #77

Open
IsmailAlamKhan opened this issue Dec 1, 2021 · 2 comments
Open

Ability to use with pagination. #77

IsmailAlamKhan opened this issue Dec 1, 2021 · 2 comments

Comments

@IsmailAlamKhan
Copy link

I am currently using the infinite_scroll_pagination for pagination and this package for scrolling to index. So the thing is the scrollToIndex works when the scrollview has that index but when I need to scroll to an index which isn't visible on the scrollview so anyway to get to that index? This is for a chat screen so when you search you can jump to that index or for example a reply.

Here is a reproducible example

import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

Future<List<int>> getData(int pageKey) {
  final list = List.generate(10, (i) => i + (pageKey * 10));
  return Future.delayed(const Duration(seconds: 2), () => list);
}

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Material App', home: Home());
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final autoScrollController = AutoScrollController();
  final paginationController = PagingController<int, int>(firstPageKey: 0);
  @override
  void initState() {
    super.initState();
    paginationController.addPageRequestListener((pageKey) async {
      final data = await getData(pageKey);
      paginationController.appendPage(data, pageKey + 1);
    });
  }

  @override
  void dispose() {
    paginationController.dispose();
    autoScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Material App Bar')),
      body: PagedListView<int, int>(
        pagingController: paginationController,
        scrollController: autoScrollController,
        reverse: true,
        builderDelegate: PagedChildBuilderDelegate(
          itemBuilder: (context, item, index) => AutoScrollTag(
            key: ValueKey(item),
            controller: autoScrollController,
            index: index,
            child: ListTile(title: Text('Item ${item + 1}')),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          autoScrollController.scrollToIndex(
            100,
            duration: const Duration(milliseconds: 500),
            preferPosition: AutoScrollPosition.begin,
          );
        },
        child: const Icon(Icons.arrow_upward),
      ),
    );
  }
}
@jerrywell
Copy link
Member

the cells in chat list should be dynamic height. you can use https://github.com/google/flutter.widgets/tree/master/packages/scrollable_positioned_list for the very long and dynamic height list to get better UX.

if you decide to use this lib for it, you can just call scrollTo() and await for it, then find the tagMap of AutoScrollController to check if the index is generated (if yes, means it's loaded and the cell widget state is created, should be in the screen). otherwise, just call scrollTo again after next page loaded until the condition turns true.

@IsmailAlamKhan
Copy link
Author

the cells in chat list should be dynamic height. you can use https://github.com/google/flutter.widgets/tree/master/packages/scrollable_positioned_list for the very long and dynamic height list to get better UX.

if you decide to use this lib for it, you can just call scrollTo() and await for it, then find the tagMap of AutoScrollController to check if the index is generated (if yes, means it's loaded and the cell widget state is created, should be in the screen). otherwise, just call scrollTo again after next page loaded until the condition turns true.

Thanks for the answer.
The height of each item in the list is already dynamic. And for that package I have to use their ScrollView can't use the ScrollView the infinite_scroll_pagination gave.

The second way you said was my first approach and I did it before opening this issue, but for some reason, it makes the whole app stuck can't use anything even the debug session stucks.

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