frenkydema / bloc_infinity_list

Infinite scrolling ListView with BLoC integration for Flutter applications.

Infinite ListView for Flutter

Overview

The Infinite ListView widget is designed to simplify the creation of paginated lists in your Flutter application. This widget integrates seamlessly with the BLoC pattern and allows you to load more items as the user scrolls to the bottom of the list.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-08-22.at.12.08.26.mp4

Features

• Automatic Pagination: Load more items automatically when the user reaches the bottom of the list.
• Refresh Control: Pull-to-refresh functionality to reload the entire list.
• Customizable UI: Easily customize loading, error, and empty state widgets.
• Debounced Scrolling: Prevents multiple loading triggers in rapid succession, ensuring efficient data fetching.
• BLoC Integration: Works with flutter_bloc to manage states and events, ensuring a clean and maintainable codebase.
• UI Customization: Customize the list container with color, border radius, border color, border width, and box shadow.
• Custom Dividers: Add custom dividers between list items using the dividerWidget.

Usage

To use the Infinite ListView, you need to provide an instance of your BLoC and an item builder. The BLoC should handle loading initial items and fetching more items as needed.

Creating a Custom BLoC

Extend the InfiniteListBloc class to create your custom BLoC. Override the fetchItems method to define how items are fetched. Here’s an example of a custom BLoC implementation:

import 'package:bloc_infinity_list/bloc_infinity_list.dart';

class MyCustomBloc extends InfiniteListBloc<ListItem> {
  @override
  Future<List<ListItem>> fetchItems(
      {required int limit, required int offset}) async {
    try {
      await Future.delayed(Durations.long1);

      if (offset >= 50) {
        return [];
      }

      return List.generate(
          limit, (index) => ListItem(name: 'Item ${offset + index + 1}'));
    } on Exception {
      rethrow;
    }
  }
}

Example Usage

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:bloc_infinity_list/bloc_infinity_list.dart';

class MyListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyCustomBloc bloc = MyCustomBloc();

    return Scaffold(
      appBar: AppBar(title: Text('Infinite ListView Example')),
      body: InfiniteListView<ListItem>(
        bloc: bloc,
        itemBuilder: (context, item) => ListTile(title: Text(item.name)),
        dividerWidget: Divider(),
        loadingWidget: (context) => Center(child: CircularProgressIndicator()),
        errorWidget: (context, error) => Center(child: Text('Error: $error')),
        emptyWidget: (context) => Center(child: Text('No items available')),
        padding: EdgeInsets.all(16.0),
        color: Colors.white,
        borderRadius: BorderRadius.circular(10.0),
        borderColor: Colors.grey,
        borderWidth: 2.0,
        boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5.0)],
      ),
    );
  }
}

bloc_infinity_list's Issues

[BUG] InfiniteListView crashes when no more items are available

Describe the bug
When using the InfiniteListView widget from the bloc_infinity_list package, if the list runs out of items and there are no more to fetch, the widget fails to handle this scenario properly. This leads to an exception being thrown when trying to build the NoMoreItemsState widget, which is not implemented in the library.

The issue manifests as a "Vertical viewport was given unbounded height" error, and the app crashes or fails to render the list correctly.

To Reproduce
Steps to reproduce the behavior:

1. Implement an InfiniteListView with a Bloc that fetches items.
2. Ensure the Bloc fetches items until there are no more items left (returns an empty list).
3. Observe the error when the list is exhausted.

Expected behavior
When there are no more items to fetch, the InfiniteListView should handle this state gracefully, either by showing an appropriate message (e.g., "No more items") or by stopping further load requests without throwing an error.

Screenshots
N/A

Smartphone (please complete the following information):

• Device: iPhone 15 Pro Max
• OS: iOS 17.2
• Version: Flutter 3.22.1

Additional context
Here's a snippet of the code that triggers the bug:

InfiniteListView<SeatReservation>(
  bloc: bloc,
  borderRadius: const BorderRadius.all(Radius.circular(10)),
  color: App.instance?.config.tema.coloreSfondoContainerBordato(context: context),
  padding: const EdgeInsets.only(
    top: CostantiTema.paddingLateraleContainers,
    bottom: CostantiTema.paddingLateraleContainers * 3,
    left: CostantiTema.paddingLateraleContainers,
    right: CostantiTema.paddingLateraleContainers,
  ),
  dividerWidget: Divider(
    color: App.instance!.config.tema.coloreBordoContainerBordato(context: context),
    height: 2,
    thickness: 1,
    indent: 20,
  ),
  itemBuilder: (context, item) => _buildReservation(context, item),
  loadingWidget: (context) => RistoWidgets.loaderCenter(
    padding: const EdgeInsets.all(CostantiTema.paddingLateraleContainers),
  ),
  errorWidget: (context, error) => RistoWidgets.widgetsHandleError(context, error),
  emptyWidget: (context) => _buildEmptyHistory(context),
)

Here’s the relevant error output:

flutter: More items fetched: 0
flutter: LoadMoreItemsEvent!
[sentry] [debug] Capture from onError Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand...

The library needs to implement proper handling for the NoMoreItemsState to prevent this error from occurring.