EdsonBueno / infinite_scroll_pagination

Flutter package to help you lazily load and display pages of items as the user scrolls down your screen.
https://pub.dev/packages/infinite_scroll_pagination
MIT License
623 stars 210 forks source link

only single page is fetched in horizontal infinite scroll #213

Closed ashutosh-mulik closed 6 months ago

ashutosh-mulik commented 2 years ago

At start Bloc receives request for pageKey 1 after that Bloc doesn't get any request for page 2nd only loading widget is shown at the end of page 1 response.

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

  @override
  State<BookmarkModal> createState() => _BookmarkModalState();
}

class _BookmarkModalState extends State<BookmarkModal> {
  final PagingController<int, WatchListModel> _pagingController = PagingController(firstPageKey: 1);
  late final BookmarkBloc _bookmarkBloc;

  @override
  void initState() {
    _bookmarkBloc = BookmarkBloc(
      whatsCryptoRepository: context.read(),
      configRepository: context.read(),
    );

    _pagingController.addPageRequestListener((pageKey) {
      _bookmarkBloc.add(GetWatchlist(page: pageKey));
    }); /// Doesn't make request to 2nd page...

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => _bookmarkBloc,
      child: BlocConsumer<BookmarkBloc, BookmarkState>(
        listener: (context, state) {
          if (state is BookmarkSuccess) {
            if (state.watchlist.isEmpty) {
              _pagingController.appendLastPage([]);
              return;
            }
            _pagingController.appendPage(state.watchlist, state.nextPage);  /// This method gets called at first and adds 2 for second page..
          }

          if (state is BookmarkError) {
            _pagingController.appendLastPage([]);
          }
        },
        builder: (context, state) {
          return BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              body: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  /// other widgets....
                  Container(
                    height: ScreenUtil().screenHeight / 2.7,
                    width: ScreenUtil().screenWidth,
                    decoration: BoxDecoration(
                      color: Color.fromARGB(255, 248, 248, 248),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20.r),
                        topRight: Radius.circular(20.r),
                      ),
                      boxShadow: [
                        BoxShadow(
                          spreadRadius: 0.5,
                          color: AppColors.grey.withOpacity(0.5),
                          blurRadius: 3,
                          offset: Offset(0, -2.5),
                        ),
                      ],
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Stack(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                IconButton(
                                  onPressed: () {
                                    Navigator.of(context).pop();
                                  },
                                  icon: Icon(Icons.close_rounded),
                                ),
                              ],
                            ),
                            Positioned.fill(
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [Text('Bookmark')],
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 160.h,
                          width: ScreenUtil().screenWidth,
                          child: PagedListView<int, WatchListModel>(    /// PagedView....
                            shrinkWrap: true,
                            pagingController: _pagingController,
                            scrollDirection: Axis.horizontal,
                            builderDelegate: PagedChildBuilderDelegate<WatchListModel>(
                              newPageProgressIndicatorBuilder: (context) {
                                return Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    LottieBuilder.network(
                                      'https://assets4.lottiefiles.com/packages/lf20_n4npjsec.json',
                                      width: 50.w,
                                    ),
                                  ],
                                );
                              },
                              itemBuilder: (context, item, index) {
                                return Material(
                                  child: InkWell(
                                    onTap: () async {},
                                    child: Column(
                                      children: [
                                        Text(item.name)
                                      ],
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ),
                        Container(
                          width: 180.w,
                          height: 45.h,
                          margin: EdgeInsets.only(bottom: 15.h, top: 13.h),
                          decoration: BoxDecoration(
                            color: Color(0xFF6183FB),
                            borderRadius: BorderRadius.circular(30.r),
                          ),
                          child: Center(
                            child: Text(
                              'Save',
                              style: TextStyle(color: AppColors.white),
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }
}

Output image_2022-07-13_121545919

Log image_2022-07-13_121741148

clragon commented 1 year ago

Your PagedListView is using shrinkWrap: true which will lead to it making many requests at once. Please do not use shrinkWrap: true with Paged views.