listview_utils_plus 0.0.3 copy "listview_utils_plus: ^0.0.3" to clipboard
listview_utils_plus: ^0.0.3 copied to clipboard

Infinite scrolling list view with multiple data source mode support using adapters. Also supports header, footer widgets.

📜 listview_utils_plus #

pub package License Null safety Platform

Supercharge ListView with custom adapters to add infinite scrolling.

Origin #

This is the continuation of the listview_utils (source code). Even though @themisir doesn't advise using it in favor of traditional state handling (RiverPod2, Provider, BLoC, etc.) I believe it still has a legitimate use when for example you want to show 180+ objects stored in a Floor (SQLite wrapper) or Moor DB in a list and don't want to repeat paging and other logic half a dozen times throughout your app. But consider his advice, possibly he is right. I'm not at the point with my project currently to realize his point.

I forked this plugin out of necessity and I have only a very limited time for maintenance, so PRs are highly welcome if any change is desired.

Example #

CustomListView(
  loadingBuilder: CustomListLoading.defaultBuilder,
  itemBuilder: (context, index, item) {
    return ListTile(
      title: Text(item['title']),
    );
  },
  adapter: NetworkListAdapter(
    url: 'https://jsonplaceholder.typicode.com/posts',
    limitParam: '_limit',
    offsetParam: '_start',
  ),
);

Getting Started #

Add those lines to pubspec.yaml file and run flutter pub get.

dependencies:
  listview_utils_plus: ">=0.0.1 <1.0.0"

Check out Installing tab for more details.

Import listview_utils_plus package to your application by adding this line:

import 'package:listview_utils_plus/listview_utils_plus.dart';

This will import required classes to use listview_utils_plus.

Properties #

CustomListView( 
  // Items fetched per request (default: 30)
  pageSize: 30,

  // Header widget (default: null)
  header: Container(...),

  // Footer widget (default: null)
  footer: Container(...),

  // The widget that displayed if the list is empty (default: null)
  empty: Text('List is empty'),

  // Item provider adapter (default: null)
  adapter: ListAdapter(
    fetchItems: (int offset, int limit) {
      return ListItems([ ... ]);
    },
  ),
  
  //Pagination Mode [offset/page] (default: offset)
  paginationMode: PaginationMode.offset 
  
  //Initial offset (default: 0)
  initialOffset: 0
  


  // A callback function to build list items (required)
  itemBuilder: (BuildContext context, int index, dynamic item) {
    // If items provided by adapter the `item` argument will be matching element
    return ListTile(
      title: Text(item['title']),
    );
  },

  // Callback function to build widget if exception occurs during fetching items
  errorBuilder: (BuildContext context, LoadErrorDetails details, CustomListViewState state) {
    return Column(
      children: <Widget>[
        Text(details.error.toString()),
        RaisedButton(
          onPressed: () => state.loadMore(),
          child: Text('Retry'),
        ),
      ],
    );
  },

  // Item count
  itemCount: 45,

  // A callback function called when pull to refresh is triggered
  onRefresh: () async {
    ...
  },

  // Enable / disable pull to refresh (default: false)
  disableRefresh: false,
),

Adapters #

ListView Utils currently only supports network adapter. Or you could write your own adapter by implementing BaseListAdapter mixin or using ListAdapter class.

Here's simple network adapter code using jsonplaceholder data.

NetworkListAdapter(
  url: 'https://jsonplaceholder.typicode.com/posts',
  limitParam: '_limit',
  offsetParam: '_start',
),

Controllers #

Scroll controller #

ListView Utils supports Flutter's built-in ScrollController, which allows for controlling the scrolling position:

class _SomeWidgetState extends State<SomeWidget> {
  ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FlatButton(
          onPressed: () {
            scrollController.animateTo(100);
          },
          child: const Text('Scroll down'),
        ),
        Expanded(
          child: CustomListView(
            adapter: ...,
            scrollController: scrollController,
            itemBuilder: (context, index, dynamic item) {
              return ListTile(
                title: Text(item['title']),
              );
            },
          ),
        ),
      ],
    );
  }

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

List controller #

ListView Utils also supports its own custom controller, which allows for controlling the list of items (for example, programmatically refreshing the list):

class _SomeWidgetState extends State<SomeWidget> {
  CustomListViewController listViewController = CustomListViewController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FlatButton(
          onPressed: () {
            listViewController.refresh();
          },
          child: const Text('Refresh'),
        ),
        Expanded(
          child: CustomListView(
            adapter: ...,
            loadingBuilder: (context) => const Center(
              child: CircularProgressIndicator(),
            ),
            scrollController: scrollController,
            itemBuilder: (context, index, dynamic item) {
              return ListTile(
                title: Text(item['title']),
              );
            },
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    listViewController.dispose();
    super.dispose();
  }
}
5
likes
160
pub points
70%
popularity

Publisher

verified publishercsaba.page

Infinite scrolling list view with multiple data source mode support using adapters. Also supports header, footer widgets.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, http

More

Packages that depend on listview_utils_plus