Как разместить элементы по 3 в ряд во Flutter

Question

У меня есть список из 20 элементов в списке (динамический c не исправлен). Я хочу отображать эти элементы в контейнере по 3 или 4 элемента в строке.

В настоящее время я получаю прикрепленный вывод.

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,
                          ),
                        ),
                      ),
                    ),
                  )),
                ],
              );
                            }),
                          ),

Answer 1

Вы можете добиться этого с помощью виджета под названием GridView.builder. Ознакомьтесь с приведенным ниже кодом, чтобы узнать, как использовать виджет gridview:

 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
    ),

Чтобы узнать больше о виджете GridView, перейдите по ссылке ниже:

Виджет GridView во Flutter

Надеюсь, это поможет.

Answer 2

Используйте GridView.

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