水平listview.builder中的间距

Question

How to do auto spacing in listview.builder().For example i need something like MainAxisAlignment.spaceEvenly in column, but i need it in list view.builder().I will have two or three not scrollable horizontal items.So i need spacing between items for different sceen sizes.Could you help me.

ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 3,//list.length expected two or three
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                    color: Colors.amber,
                    border: Border.fromBorderSide(
                      BorderSide(
                        color: Color(0xFF8D4AE9),
                        width: 1.0,
                      ),
                    ),
                  ),
                );
              },
            ),

For example, picture enter image description here

Answer 1

add margin and padding as much you want.

ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 7,//list.length expected two or three
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            width: 100,
            margin: EdgeInsets.all(10),// add margin 
            padding: EdgeInsets.all(10),// add padding
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              color: Colors.amber,
              border: Border.fromBorderSide(
                BorderSide(
                  color: Color(0xFF8D4AE9),
                  width: 1.0,
                ),
              ),
            ),
          );
        },
      )

Answer 2

You can try adding a SizedBox with fixed height: or width: or even both between the content you want. Another solution is adding Padding with equal values.

Answer 3

First you have to wrap your list view with the container or card or sized box if you want the horizontal Scroll of the list. Next how you just wrap your return width with the padding to the padding to get the padding.

Try this code:

Container(
      height: 100,width: MediaQuery.of(context).size.width,
      child:
      ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 13,
        itemBuilder: (context, i) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 100,
              decoration: BoxDecoration(
                color: Colors.black,
                ),
              ),
            );
        },
      ),
    ),