flutter_long_list 0.1.3 flutter_long_list: ^0.1.3 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 performanc
-
Support ListView, GridView and Slivers
-
Easy api, custom loading & nomore style
-
Support List item exposure listener
-
Support ScrollToIndex
Get started #
Add it to your pubspec.yaml file:
dependencies:
flutter_long_list: 0.1.3
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 ❤️
Basic Usage #
Create a GridView By flutter_long_list
Step1 - Use ChangeNotifierProvider #
ChangeNotifierProvider<LongListProvider<T>>(
create: (_) => LongListProvider<T>(),
child: GridViewDemo(),
);
Step2 - Init LongListProvider #
·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'
};
}
}
Step3 - Use LongList #
·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<T> provider, 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!
Feature Use #
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
- your data must have clone method, because provider
Selector
need.
2. If you want use exposure listener, only add exposureCallback #
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.
3. Use ScrollToIndex #
ScrollToIndexController scrollController = ScrollToIndexController();
scrollController.scrollToIndex(LongListProvider provider, String id, int index);