Those things on a list ListView's Flutter

flutter inside listview supports vertical and horizontal list list.

Horizontal list

 scrollDirection: Axis.horizontal

Vertical list

scrollDirection:  Axis.vertical

listview also created a variety of ways.

A fixed number of item

It can be directly used children assigned directly add a child item that is good.

new ListView(
  children: <Widget>[
    new Container(
      width: 160.0,
      color: Colors.red,
    ),
    new Container(
      width: 160.0,
      color: Colors.blue,
    ),
    new Container(
      width: 160.0,
      color: Colors.green,
    ),
    new Container(
      width: 160.0,
      color: Colors.yellow,
    ),
    new Container(
      width: 160.0,
      color: Colors.orange,
    ),
  ],
)

Sub-item number is variable

Construction of a builder manner.

 new ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Container(
          child: new Text('${items[index]}'),
        );
      },
    );

To add the item to the dividing line, may be added depending on the parity judgment when the index.

index.isOdd //判断是否是奇数

Determine whether it is an odd number.

final index = i ~/ 2;//表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5时，
        // 结果为0, 1, 1, 2, 2

False data divider can not use the above method.
There is also a specially added listview separation line generation method.

ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        if (index == catergoryChildList.length) {
          return buildCircleProgressBar();
        } else {
          CatergoryChild catergoryChild = catergoryChildList[index];
          return ItemView(catergoryChild, index, (index) {
            Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text("第$index项被点击了")));
          });
        }
      },
      separatorBuilder: (context, index) {
        return new Divider(
          height: 1,
        );
      },
      scrollDirection: Axis.vertical,
      itemCount: catergoryChildList.length + 1,
      controller: scrollController,
    );

This method is more convenient, they do not make divider data and a place to generate divider alone.

listview drop-down refresh.

RefreshIndicator(
      child: listViewM,
      onRefresh: () async{
        getData();
      },
      color: Colors.blue,
    );

This realization android Mateial-style pull-down refresh.
getData () method is as follows:

void getData(){
    if (!isFetching) {
      catergoryChildTask.getCatergoryTask(type);
      isFetching = true;
    }
  }

Note that onRefresh field is needed is a method of async, if not async method of error.
Also can be written:

RefreshIndicator(
      child: listViewM,
      onRefresh: getData,
      color: Colors.blue,
    );

But this time getData method is implemented.

  Future<Null> getData() async{
    if (!isFetching) {
      catergoryChildTask.getCatergoryTask(type);
      isFetching = true;
    }
    return null;
  }

Raja listview on the carrier more

Raja listview on the carrier is triggered by ScrollController more control.
Rolling in the end portion of the detecting conditions are as follows:

 scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        loadMore=true;
        getData();
      }
    });

listview lowermost display process progress bar Loading may refer to the following

 itemBuilder: (BuildContext context, int index) {
        if (index == catergoryChildList.length) {
          return buildCircleProgressBar();
        } else {
          CatergoryChild catergoryChild = catergoryChildList[index];
          return ItemView(catergoryChild, index, (index) {
            Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text("第$index项被点击了")));
          });
        }
      }

Wherein the method of processing buildCircleProgressBar follows:

  Widget buildCircleProgressBar() {
    return Padding(
      padding: EdgeInsets.all(8),
      child: Center(child: Opacity(
          opacity: 1, child: CircularProgressIndicator()),
      ),);
  }

This realization of the display sub-item state is loading when pulled to the bottom. If you want other processing can be themselves.

Author: Happiness Program Yuan
link: https: //www.jianshu.com/p/67c427eac0d8
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.