How to make original Grid View on Flutter

I would like to implement something like this picture using Grid View or another way by Flutter.

I implemented to use of GridView.builder below like codes. But this code doesn't work like the picture.

Could you give me your idea to express like this picture?

GridView.builder(
  itemCount: items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (BuildContext context, int index) {
    final isDoubleWidth = (index + 1) % 5 == 0;
    final itemWidth = isDoubleWidth ? MediaQuery.of(context).size.width / 3 * 2 : MediaQuery.of(context).size.width / 3;
    return SizedBox(
      width: itemWidth,
      child: Text(item[index].title.toString),
    );
  },
);

Just use flutter_staggered_grid_view: ^0.6.2

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),
  ],
);

GridView does not support something like what you have shown in the picture. If you don't want to use 3rd party plugins, I suggest you use ListView and Row widgets to build this UI. You can consider this UI as a list of rows, and each row would contain either 2 or 3 elements. So based on the index of the ListView.builder()'s itemBuilder parameter, you can calculate which elements you should show for this list item (the entire row), and from there you can construct your own row using Row widget.

With this code, I could make that picture likely.

I incremented 5 in this case because the column and row are in 5 items.

 final itemLength = (items.length) / 5;

        return ListView.builder(
            itemCount: itemLength.toInt(),
            itemBuilder: (BuildContext context, int index) {
              index *= 5;
              return Column(
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 2 / 3,
                        child: Text(items[index].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 1].title.toString()),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 2].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 3].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 4].title.toString()),
                      ),
                    ],
                  ),
                ],
              );
            });