How to display widgets in a specific pattern dynamically in Flutter?

Question

I want to display widget in a specific pattern. I try to use GridView, but it seems that GridView can only set one value at crossAxisCount. I want it to be 3, 2 pattern. I have refer to @chunhunghan answer at this , but the pattern is in 00, 111, 22, 333, 44, 555 pattern vertically. I want it to be 012, 34, 567, 89 pattern vertically. I have attached the expected output. Thank you.

 GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, childAspectRatio: 1),
      itemCount: 10,
      itemBuilder: (context, index) {
        return Column(children: <Widget>[
          Icon(Icons.access_alarm,
              color: Colors.redAccent, size: 100.0),
          Text(index.toString())
        ],);
      })

Output Expected Output

Answer 1

modify the below code as per your requirement ! UPDATED

    int itemCount = 100, lastCount = 3, lastNum = 0;

@override
  void initState(){
    super.initState();
    itemCount++;
  }

      @override
      Widget build(BuildContext context) {
        return ListView.builder(
            itemCount: ((itemCount / 3 / 2) + (itemCount / 2 / 2)).toInt(),
            itemBuilder: (con, ind) {
              if (lastCount == 3) {
                lastCount = 2;

                //Add below condition to show exact pattern by avoiding extra numbers
                return (itemCount - lastNum) >= lastCount + 1
                    ? Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: List.generate(lastCount + 1, (cInd) {
                          lastNum++;

                          //Below condition to show upto itemCount by showing remaining numbers in next line ! It won't work if you use above formula. i.e Showing Exact Pattern
                          return lastNum < itemCount + 2
                              ? Column(mainAxisSize: MainAxisSize.min, children: [
                                  Icon(Icons.check_circle),
                                  Text('${lastNum - 1}')
                                ])
                              : SizedBox();
                        }))
                    : SizedBox();
              } else {
                lastCount = 3;

                //Add below condition to show exact pattern by avoiding extra numbers
                return (itemCount - lastNum) >= lastCount - 1
                    ? Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: List.generate(lastCount - 1, (cInd) {
                          lastNum++;

                          //Below condition to show upto itemCount by showing remaining numbers in next line ! It won't work if you use above formula. i.e Showing Exact Pattern
                          return lastNum < itemCount + 2
                              ? Column(mainAxisSize: MainAxisSize.min, children: [
                                  Icon(Icons.check_circle),
                                  Text('${lastNum - 1}')
                                ])
                              : SizedBox();
                        }))
                    : SizedBox();
              }
            });
      }

Answer 2

Maybe you could just "pad" the rows with only 2 items with an empty Container() if that workaround works for you?

GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, childAspectRatio: 1),
      itemCount: 10,
      itemBuilder: (context, index) {
        return Column(children: <Widget>[
          Icon(Icons.access_alarm,
              color: Colors.redAccent, size: 100.0),
          Text(index.toString()),
          Container()
        ],);
      })

or check if the index is odd or even then have two builder functions, one return 3 items and the other returning only 2

Answer 3

Keep things simple and just use Row and Column with MainAxisAlignment.center . Here is a working DartPad and the code:

  itemBuilder(index) {
    return Column(children: [
      Icon(Icons.access_alarm, color: Colors.redAccent, size: 100.0),
      Text(index.toString())
    ]);
  }

  rowBuilder(start, end) {
    var length = end - start + 1;
    var itemArray = new List<Widget>(length);

    for (var index = 0; index < length; index++) {
      itemArray[index] = itemBuilder(start + index);
    }

    return Row(
        mainAxisAlignment: MainAxisAlignment.center, children: itemArray);
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      rowBuilder(0, 2),
      rowBuilder(3, 4),
      rowBuilder(5, 7),
      rowBuilder(8, 9),
    ]);
  }