Flutter ListView Load more

Realization function

• Load to the end
• Prevent frequent loading
• Load progress icon
• Show all tips

Function realization

Load to the end

stay initState() Add

 @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      	 //TODO  The behavior triggered at the bottom 
      }
    });
  }

Prevent the network from loading frequently

Add... To the loading function

_getMoreData() async {
    if (!isPerformingRequest) { 
      setState(() => isPerformingRequest = true);
      //TODO  Join the network request function call 
      List<*> newEntries = await requestNet();
      setState(() {
        list.addAll(newEntries);
        isPerformingRequest = false;
      });
    }
}

explain

1.isPerformingRequest Is a global variable

2.list To show the List

Load icon

The following is the function to display the load icon

Widget _buildProgressIndicator() {
  return new Padding(
    padding: const EdgeInsets.all(8.0),
    child: new Center(
      child: new Opacity(
        opacity: isPerformingRequest ? 1.0 : 0.0,
        child: new CircularProgressIndicator(),
      ),
    ),
  );
}

Show all tips

ListView.builder(
      itemCount: list.length + 1,
      itemBuilder: (context, index) {
        if (index == list.length) {
          return maxPageNum[arrayIndex] == currentPage[arrayIndex]
              ? _buildListEndView()
              : _buildProgressIndicator();
        } else {
          return _buildShowUnit
        }
      },
      controller: text == _TitleList[0] ? _incomeScrollController
          : _outcomeScrollController,
    );

Acknowledgement

reference ： https://juejin.im/post/5b3abfc4518825622c14a6f1 . And sort it out by yourself . Infringement must be deleted .

appreciate

If it helps you , Stand by me , Thank you for