How can I implement this card view design in Flutter

Question

I want the second column of cards to be slightly uneven how can I achieve that. here is the output that I want:

Answer 1

You can use GridView.builder like this

GridView.builder(
  padding: EdgeInsets.only(left: 20, right: 20),
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 8,
    childAspectRatio: 0.7,
  ),
  itemCount: 10,
  itemBuilder: (context, index) {
    return Padding(
      padding: (index % 2) == 0 ? EdgeInsets.only(bottom: 15) : EdgeInsets.only(top: 15),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: (index % 2) == 0 ? Colors.red : Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
    );
  },
);

Answer 2

One approach would be to add two columns inside a row:

Row(
  children: [
    Expanded(
      child: Column(
        children: [
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
        ],
      ),
    ),
    Expanded(
      child: Column(
        children: [
          const SizedBox(
            height: 50,
          ),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
        ],
      ),
    ),
  ],
);