flutter_long_list 0.0.8 flutter_long_list: ^0.0.8 copied to clipboard
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 #
- 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.8
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, 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.