Flutter - the most detailed ListView (list) layout tutorial

The list display can accommodate multiple subcomponents, which can be constructed by builder , separated , custom , etc.

Attributes	effect
padding	Padding
controller	list scroll controller
itemExtent	The height of each item
itemCount	total number of lists
separatorBuilder	Separator for each item
keyboardDismissBehavior	keyboard off mode
scrollDirection	scroll direction

class CustomListView extends StatelessWidget {
    
    
  final data = <Color>[
    Colors.purple[50]!,
    Colors.purple[100]!,
    Colors.purple[200]!,
    Colors.purple[300]!,
    Colors.purple[400]!,
    Colors.purple[500]!,
    Colors.purple[600]!,
    Colors.purple[700]!,
    Colors.purple[800]!,
    Colors.purple[900]!,
  ];

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      child: ListView(
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: data
            .map((color) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 50,
                  color: color,
                  child: Text(
                    colorString(color),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ))
            .toList(),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

 Container(
      height: 200,
      child: ListView.separated(
        separatorBuilder: (context, index) => Divider(
          thickness: 1,
          height: 1,
          color: Colors.orange,
        ),
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
    )

It can be clearly seen that there is a dividing line in the middle of each item.
The thickness property represents the thickness of the color of the dividing line.
The height property represents the overall height of the dividing line.

Look at a rendering of modifying the properties of thickness=1 and height=30

Container(
      height: 400,
      child: ListView.builder(
        itemExtent: 100,
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
    )

The attribute itemExtent sets the fixed height of the item , which helps to improve the rendering speed of the list.

Summary:
1. During the development process, you will encounter the height of the default inner spacing at the top of the list. There are two ways to solve this problem
2. We can display different item styles according to the index of the list .

• The first

MediaQuery.removePadding(
     context: context,
     removeTop: true,
     child:  ListView.builder(
        itemExtent: 100,
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
   )

• the second

ListView.builder(
        padding: EdgeInsets.only(top: 0),
        itemExtent: 100,
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      )

Usage scenario: For example, the home page list of the Deyi Life application, the top is the advertisement item , the middle is the selected activities of the week , and the bottom is all Item styles
. This list can be judged according to the index to display different item styles .

Container(
      height: 400,
      child: ListView.builder(
        itemExtent: 100,
        itemCount: data.length + 2,
        itemBuilder: (context, index) {
    
    
          if (index == 0) {
    
    
            return Container(
              height: 100,
              child: Text('我是头'),
            );
          } else if (index == 1) {
    
    
            return Container(
              height: 100,
              child: Text('我在中间'),
            );
          }
          return _buildItem(data[index - 2]);
        },
      ),
    )

It should be noted here that,itemCountthe number of . When there are two more custom views in the list, you need to add two to the list data. To ensure the consistency of the total number of ListView lists, otherwise it will cause the list length to overflow and report an error.