This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

When I learned ListView last time, I only learned about asynchronous request data Loading news and Loading waiting, but for the news list data update and Loading is essential, and there are many ways to achieve [dropdown refresh] and [swipe load more]. A quick tip today is to use the tripartite library Flutter_REFRESH to update the list data. The main reason why Xiao Kai wanted to try flutter_refresh is that the integration of Flutter_refresh is very simple, and there is no need to write the head style and loading of bottom loading separately. Second, the dish technology is too limited and there are too many unknowns about Flutter, so I want to try several ways.

Integrated way

  1. Yaml add FLutter_refresh: ^0.0.2 and sync Packages GET;
  2. Add the reference import ‘package:flutter_refresh/flutter_refresh. Dart ‘to the appropriate.dart file;
  3. OnHeaderRefresh drop down Refresh and onFooterRefresh bottom Refresh in the two methods of data processing. The test interface of the small dish needs to be processed according to the parameter values of the last news ID of each page and the total number of news items.

OnHeaderRefresh () {return new future.delayed (new Duration(seconds: 2), () { setState(() { rowNumber = 0; lastFileID = '0'; newsListBean = null; getNewsData(lastFileID, rowNumber); }); }); } // Bottom refresh Future<Null> onFooterRefresh() async {return new future.delayed (new Duration(seconds: 2), () { setState(() { getNewsData(lastFileID, rowNumber); }); }); } getNewsData(var lastID, var rowNum) async {await http.get ('https://.. ') ? lastFileID=${lastID}&rowNumber=${rowNum}') .then((response) { if (response.statusCode == 200) { var jsonRes = json.decode(response.body); newsListBean = NewsListBean(jsonRes); if (lastID == '0' && rowNum==0 && dataItems ! = null) { dataItems.clear(); } setState(() { if (newsListBean ! = null && newsListBean.list ! = null && newsListBean.list.length > 0) { for (int i = 0; i < newsListBean.list.length; i++) { dataItems.add(newsListBean.list[i]); } lastFileID = newsListBean.list[newsListBean.list.length - 1].fileID .toString(); rowNumber += newsListBean.list.length; } else {} }); }}); } Widget childFreshWidget() { Widget childFreWi; if (dataItems ! = null && dataItems.length ! ChildFreWi = new Padding(Padding: EdgeInsets. All (6.0), child: new Refresh(onFooterRefresh: onFooterRefresh, onHeaderRefresh: onHeaderRefresh, childBuilder: (BuildContext context, {ScrollController controller, ScrollPhysics physics}) { return new Container( child: new ListView.builder( physics: physics, controller: controller, itemCount: rowNumber, itemBuilder: (context, item) { return buildListData(context, dataItems[item]); })); },),); } else { childFreWi = new Stack( children: <Widget>[ new Padding( padding: New EdgeInsets. FromLTRB (0.0, 0.0, 0.0, 35.0), Child: new Center(Child: SpinKitFadingCircle) Colors. BlueAccent, size: 30.0,),),), new Padding(Padding: new EdgeInsets. FromLTRB (0.0, 35.0, 0.0, 0.0), child: New Center(child: new Text(' I'm loading, '),),],); } return childFreWi; }Copy the code

The problem summary

Xiao CAI encountered a lot of small problems in the test process, now sort out one by one.

Problem 1: After the initialization page is loaded, the refreshed data is not loaded after the first page is loaded, but the data is loaded after the second refresh, and the data refreshed last time is loaded?
Solution:
  1. Call the data interface initState() when entering the page to ensure that the first load is normal;
  2. Be sure to add setState(() {}) to getNewsData(); During the test, every refresh interface will be called normally, but the data that is refreshed for the first time is loaded only after the second refresh. The interface is normal, but the data is always a beat slower. Be sure to pay attention in the future so you can update in real time.
Question 2: During the drop-down refresh process, does the interface data load repeatedly?
Solution:

A simple drop-down refresh would be to re-invoke the original interface. First, clear the list, otherwise interface data duplication will actually occur.

Future<Null> onHeaderRefresh() { return new Future.delayed(new Duration(seconds: 2), () { setState(() { rowNumber = 0; lastFileID = '0'; if (dataItems ! = null) { dataItems.clear(); } getNewsData(lastFileID, rowNumber); }); }); }Copy the code
Problem 3: According to the solution of problem 2, the display is normal, but the runtime Log reports an error, indicating that the Widget has been created?

Solution:

After a long test, I moved the null judgment list from onHeaderRefresh() to the getNewsData() method of data processing. It wasn’t very understandable, but the problem worked fine. The small dish’s understanding is that onHeaderRefresh() deals with data and widgets, while the small dish’s own method is pure data processing.

if (lastID == '0' && rowNum==0 && dataItems ! = null) { dataItems.clear(); }Copy the code

Xiao CAI has not been in touch with Flutter for a long time, and there are still many unclear and ununderstood aspects. I hope to point out more if there are wrong aspects.

Source: Little Monk A Ce