CODEWITHSUNDEEP
flutter
raj
raj

Reputation: 341

How to place the items 3 per row in Flutter

I have a list with 20 items in a list (dynamic not fixed). I want to display these items in a container with 3 or 4 items per row.

At present I am getting the attached output.

I am getting this output 

Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: List.generate(itemList.length,
                (index) {
              return Wrap(
                 children: <Widget>[
                  Container(
                      //height:140,
                      child: SizedBox(
                    width: 100.0,
                    height: 50.0,
                    child: Card(
                      color: Colors.white,
                      semanticContainer: true,
                      clipBehavior:
                          Clip.antiAliasWithSaveLayer,
                      shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(10.0),
                      ),
                      elevation: 5,
                      margin: EdgeInsets.all(10),
                      child: Center(
                        child: Text(
                          (itemList.length[index]
                              .toUpperCase()),
                          style: TextStyle(
                            color: Colors.blue,
                            fontWeight: FontWeight.bold,
                            fontSize: 15.0,
                          ),
                        ),
                      ),
                    ),
                  )),
                ],
              );
                            }),
                          ),

Upvotes: 2

Views: 9179

Answers (3)

amit_roy
amit_roy

Reputation: 1

Using a GridView works for me.

  GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4   //How many items do you want to show,
            mainAxisSpacing: 10  //Space between the lines,
            crossAxisSpacing: 10  //Space between the items,
          ),

Upvotes: 0

Bilaal Abdel Hassan
Bilaal Abdel Hassan

Reputation: 1379

Use a GridView.

GridView.builder(
  scrollDirection: Axis.vertical,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
)

Upvotes: 2

timilehinjegede
timilehinjegede

Reputation: 14053

You can achieve this using a widget called GridView.builder. Check the code below for how to use a gridview widget:

 GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         // number of items per row
        crossAxisCount: 3,
         // vertical spacing between the items
         mainAxisSpacing: 10,
         // horizontal spacing between the items
         crossAxisSpacing: 10,
        ),
      // number of items in your list
      itemCount: 20
    ),

To read more on the GridView widget, check the link below:

GridView Widget in Flutter

I hope this helps.

Upvotes: 7

Related Questions