The Flutter ListView encapsulates a pull-down refresh and pull-up load for more

Encapsulates the ListView of Flutter. The ListView can be drawn as long as the method of passing the request data and the method of drawing the item are included. It also supports pull-down refresh and pull-up loading.

Dart // encapsulated ListView,

Dart // List_view_item. dart//ListView renders the view

Refersh_list_view_demo.dart // encapsulate ListView usage

Github address: github.com/damengzai/f…

1. refresh_list_view.dart

You can pull down to refresh and load more ListViews

@override
Widget build(BuildContext context) {
return RefreshIndicator(
    child: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        if (widget.listItemView is Function) {
          return widget.listItemView(index, items[index]);
        }
      },
      physics: const AlwaysScrollableScrollPhysics(),
      controller: _scrollController,
    ),
    onRefresh: _handleRefresh);
  }
Copy the code

RefreshIndicator: A Material style drop-down refresh component that contains a scrollable sub-component. When the sub-component is pulled down, there will be a circular refresh icon. When the pull-down distance is sufficient, onRefresh will be triggered, and data will be refreshed in onRefresh.

When the components are too short to scroll, you need to add physics: const AlwaysScrollableScrollPhysics (), otherwise the drop-down refresh and tensile load more invalid, cannot be triggered.

ListView: ItemBuilder is used to render subitems, controller adds a ScrollController that responds to scroll events, listens to scroll to the bottom, does more loading, and ScrollController can jump to the specified location, remember the scroll position, etc.

@override
void initState() {
  super.initState();
  _loadMore();
  _scrollController.addListener(() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      // Scroll to the end to request more_loadMore(); }}); }Copy the code

In the initial state, the data is first fetched via _loadMore(), and the _scrollController is used to listen for the position of the scroll. When the scroll reaches the bottom, the method to load more data is triggered.

// Load more
Future _loadMore() async {
  if(! isLoading) {if(this.mounted) {
      setState(() {
        // Update data with setState
        isLoading = true; }); }}List moreList = await mockHttpRequest();
  if (this.mounted) {
    setState(() {
      items.addAll(moreList);
      isLoading = false; }); }}Copy the code

Load more methods to simulate a network request. When data is returned, update the data back to state via setState to achieve UI refresh. The method of pull-down refresh is similar and will not be described too much.

2. list_view_item.dart
@override
Widget build(BuildContext context) {
  return Card(
    color: Colors.white,
    elevation: 4.0,
    child: Padding(
      padding: const EdgeInsets.fromLTRB(8.0.30.0.8.0.30.0),
      child: Text(
        this.title,
        style: new TextStyle(
          color: Colors.blue,
          fontSize: 20,
        ),),),);}
Copy the code

Without going into too much detail, you can customize the UI to your own needs, and now you just display a TextView.

3.refresh_list_view_demo.dart
 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          newExpanded( child: RefreshListView(getListData, createListItem), ),],),); }}Copy the code

GetListData and createListItem are methods to get data and render subitems, respectively. Passing methods in (much more flexible than JAVA) makes customization more flexible.

The above is a simple package for pulling down to refresh and pull up to load more ListViews, which is optimized for easy use.

Wechat official account: “Introduction to Flutter”