flutter_long_list
A Flutter LongList with Provider which supports ListView, GridView and Slivers
Features
- Support refresh & loadmore & error
- Use Provider4.x to manage list data , and use Selector can improve performance
- Support ListView, GridView and Slivers
- Easy api, custom loading & nomore style
- 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:
- use ChangeNotifierProvider
ChangeNotifierProvider<LongListProvider<T>>(
create: (_) => LongListProvider<T>(),
child: GridViewDemo(),
);
- 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'
};
}
}
- 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, LongListProviderprovider, String id, int index, T data) { return your custom widget}
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.