flutter_long_list 0.0.9

Flutter Android iOS web

A Flutter LongList with Provider which supports ListView, GridView and Slivers.

flutter_long_list #

A Flutter LongList with Provider which supports ListView, GridView and Slivers

Features #

  1. Support refresh & loadmore & error
  2. Use Provider4.x to manage list data , and use Selector can improve performance
  3. Support ListView, GridView and Slivers
  4. Easy api, custom loading & nomore style
  5. Support List item exposure listener

Get started #

Add it to your pubspec.yaml file:

  dependencies:
     flutter_long_list: ^0.0.9

Install packages from the command line

  flutter packages get

If you like this package, consider supporting it by giving it a star on Github and a like on pub.dev ❤️

Usage #

How to create a GridView By flutter_long_list:

  1. use ChangeNotifierProvider
 ChangeNotifierProvider<LongListProvider<T>>(
   create: (_) => LongListProvider<T>(),
   child: GridViewDemo(),
 );
  1. init GridView
    ·param id: list custom id is required.
    ·param pageSize: list load more need pagesize to request.
    ·param request: list load more function, offset = page * pageSize(page initialValue = 0).
@override
initState() {
  longListProvider.init(
    id: id,
    pageSize: 5,
    request: (int offset) async => await _getList(offset),
  );
  // your code...
}
// 'list' & 'total' & 'error' can not be modified. These field will use to loadmore.
_getList(offset) {
  final result = await api(0, 5); // your request api
  if (result['list'] != null) {
    return {
      'list': result['list'], 
      'total': result['total']
    };
  } else {
    return {
      'error': 'error'
    };
  }
}
  1. render GridView
    ·param id: list custom id you have inited.
    ·param gridDelegate: gridView property.
    ·param mode: enum LongListMode {list, grid, sliver_list, sliver_grid}
    ·param itemWidget: (BuildContext context, LongListProvider
LongList<T>(
  id: id,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
  ),
  padding: EdgeInsets.only(left: 10, right: 10),
  mode: LongListMode.grid,
  itemWidget: itemWidget,
)

Then you have finished to create a LongList GridView Widget easily!

Notice #

1.You can use it to make your list data shared. Need to be determined the list has inited before use these functions. Please see ListView example.

prvider.list[id].addItem(id, index, data); // add item
prvider.list[id].addItems(id, data); // add list
prvider.list[id].changeItem(id, index, data); // delete item
prvider.list[id].removeItem(id, index); // remove item

2.If you want use exposure listener, only add exposureCallback as:

LongList<T>(
  id: id,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
  ),
  padding: EdgeInsets.only(left: 10, right: 10),
  mode: LongListMode.grid,
  itemWidget: itemWidget,
  exposureCallback: (LongListProvider<T> provider, List<ToExposureItem> exposureList) {
    exposureList.forEach((item) {
      print('上报数据:${provider.list[item.index]} ${item.index} ${item.time}');
    });
  },
)

if use sliver mode, please must add 'sliverHeadHeight' param. It equals your sliverHead's expandedHeight.

2
likes
90
pub points
58%
popularity

A Flutter LongList with Provider which supports ListView, GridView and Slivers.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

1258658726@qq.com

License

MIT (LICENSE)

Dependencies

extended_list, flutter, provider, tuple

More

Packages that depend on flutter_long_list