Faced a problem with the spacing between items in a list. I need to make sure that the spacing between the elements is the same, because I now have a different spacing due to the text. How can I solve this problem and make the distance everywhere the same between containers, and ignore the indents between texts?

code

SizedBox(
                  height: 70,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: connectors.length,
                    itemBuilder: (context, index) => 
                      Column(
                        children: [
                          Container(
                            width: 47,
                            height: 47,
                            decoration: BoxDecoration(
                              color: constants.Colors.white.withOpacity(0.15),
                              borderRadius: BorderRadius.circular(18),
                              border: Border.all(
                                  color: constants.Colors.greyDark, width: 0.5),
                            ),
                            alignment: Alignment.center,
                            child: SvgPicture.asset(
                              connectors.keys.elementAt(index),
                              color: constants.Colors.greyConnector,
                            ),
                          ),
                          const SizedBox(height: 4),
                          Text(
                            connectors.values.elementAt(index),
                            style: constants.Styles.smallerHeavyTextStyleWhite
                                .copyWith(color: Colors.white.withOpacity(0.5)),
                          ),
                        ],
                      ),
                    ),
                ),

It is now

As a result, you need to get this result. Equal spacing between containers

CodePudding user response：

Add some padding around your column and add left or right padding:

Padding(
padding: EdgeInsets.only(right: 8.0),
child: Column()
)

CodePudding user response：

well , there are two ways : thfe first is to put a wrap the Column in itemBuilder with a padding , the second way is to use ListView.separated.

the first solution :

Padding(
   padding:EdgeInsets.all(8.0),
   child:your Column);

the second solution:

ListView.separated(
                itemBuilder: (context, index) => your Column here .
                separatorBuilder: (context, index) => const Divider(),// here u can customize the space.
                itemCount:
                    10),