Like most applications, I am trying to create a simple grid layout with the last tile being ‘All +’. I am using the StaggeredGrid Flutter package to build the grid layout but if items <= 4, the grid layout should adjust.

itemCount == 1 [4,2]
itemCount == 2 [2,2], [2,2]
itemCount == 3 [2,2], [2,1], [2,1]
itemCount == 4 [2,2], [2,1], [1,1], [1,1]
itemCount >= 4 same layout as before but with last tile being custom 'All +'

The method I have right now works, however, I wanted to know if there was a better solution that is less redundant in code?

I built a staggered grid with a customizable layout based on the number of elements in a list. It creates tiles with the appropriate rounded corners and cellcount configuration. The layout adapts to accommodate up to 4 items efficiently, with a special tile for more than 4 items.

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

StaggeredGrid buildGrid(List<int> tileNumber) {
  List<StaggeredGridTile> tiles = [];

  if (tileNumber.length == 1) {
    tiles.add(tile(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      tileNumber: tileNumber[0],
    ));
  } else if (tileNumber.length == 2) {
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      topRightRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[0],
    ));
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      tileNumber: tileNumber[1],
    ));
  } else if (tileNumber.length == 3) {
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      topRightRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[0],
    ));
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[1],
    ));
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      topRightRadius: 10.0,
      tileNumber: tileNumber[2],
    ));
  } else if (tileNumber.length == 4) {
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      topRightRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[0],
    ));
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[1],
    ));
    tiles.add(tile(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      topRightRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[2],
    ));
    tiles.add(tile(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      topRightRadius: 10.0,
      tileNumber: tileNumber[3],
    ));
  } else {
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      topRightRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[0],
    ));
    tiles.add(tile(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[1],
    ));
    tiles.add(tile(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      topLeftRadius: 10.0,
      bottomLeftRadius: 10.0,
      topRightRadius: 10.0,
      bottomRightRadius: 10.0,
      tileNumber: tileNumber[2],
    ));
    tiles.add(StaggeredGridTile.count(
        crossAxisCellCount: 1,
        mainAxisCellCount: 1,
        child: GestureDetector(
          child: Container(
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10.0),
                  topRight: Radius.circular(10.0),
                  bottomLeft: Radius.circular(10.0),
                  bottomRight: Radius.circular(20.0),
                ),
              ),
              child: const Center(child: Text("All +"))),
        )));
  }
  return StaggeredGrid.count(
    crossAxisCount: 4,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    children: tiles,
  );
}

StaggeredGridTile tile({
  required int crossAxisCellCount,
  required int mainAxisCellCount,
  required int tileNumber,
  double topLeftRadius = 10.0,
  double topRightRadius = 10.0,
  double bottomLeftRadius = 10.0,
  double bottomRightRadius = 10.0,
}) {
  return StaggeredGridTile.count(
    crossAxisCellCount: crossAxisCellCount,
    mainAxisCellCount: mainAxisCellCount,
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(topLeftRadius),
          topRight: Radius.circular(topRightRadius),
          bottomLeft: Radius.circular(bottomLeftRadius),
          bottomRight: Radius.circular(bottomRightRadius),
        ),
      ),
      child: Center(
        child: Text(tileNumber.toString()),
      ),
    ),
  );
}