I want to show only 4 rows of data in one container, then the next 4 rows of data in the second, then again the next 4 rows of the data in the next Container like this.

I am fetching the data from API, and I want to divide this data into 4 containers how can I do this with listView builder? and what other thing I need to use for this task please suggest me something. any other widget which is most suitable for this task pleases let me know.

For Example:- I want to show the data in 4 by 4 like this image on container, its showing only 4 data.

the second container also shows the next 4 data like this

ListView.builder(
            shrinkWrap: true,
            itemCount: _data?.length,
            itemBuilder: (context, index) {
              var data = _data?[index];
              String name = data?.name.toString() ?? '';
              var names = StringUtils.convertToTitleCase(name.toString());
              var leadid = data?.leadId.toString();
              return Column(
                children: [
                  Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(
                              left: 10, right: 10, top: 5, bottom: 5),
                          child: Row(
                            children: [
                              GestureDetector(
                                  onTap: () {},
                                  child: Container(
                                    height: 30,
                                    width: 33,
                                    child: randomAvatar(
                                      DateTime.now().toIso8601String(),
                                      height: 60,
                                      width: 62,
                                    ),
                                  )),
                              SizedBox(
                                width: 10,
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Container(
                                    width:
                                        MediaQuery.of(context).size.width * 0.4,
                                    child: Text(
                                      names.toString(),
                                      overflow: TextOverflow.ellipsis,
                                      style: UtilsMethods.mediumTextStyle(
                                        AppColor.darkGrey,
                                        13,
                                      ),
                                    ),
                                  ),
                                  Text(
                                    leadid.toString(),
                                    style: UtilsMethods.mediumTextStyle(
                                        AppColor.darkGrey, 10),
                                  ),
                                ],
                              ),
                              Spacer(),
                              IconButton(
                                icon: SvgPicture.asset(
                                  "assets/svg/details.svg",
                                ),
                                onPressed: () {
                                  Future.delayed(Duration.zero, () async {
                                    data(
                                      context,
                                      data?.name,
                                      data?.leadId.toString(),
                                    
                                    );
                                  });
                                },
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    color: Colors.blueGrey[100],
                    height: 0.8,
                  )
                ],
              );
              
            }),

CodePudding user response：

You can add a sizedbox to column if the index is divisible by 4

if(index % 4 == 0) SizedBox(
  height : 20,
)

Please add this as the last child of column inside the list viewbuilder

CodePudding user response：

You can use ListView.separated and set separatorBuilder like this:

separatorBuilder: (context, index){
              return SizedBox(
                height: index % 4 == 0 ? 16: 0,
              );
            }