はじめに

こんな感じでGridView.builderでContainerを複数配置するレイアウトがあったとします。
Containerの周りには枠線をつけると、👆の図のように重なっている部分がどうしても線が太くなってしまうんですよね・・・

これを一体どうやって均等な太さの枠線にしようか？というのが今回の題です。。

cssなら簡単にできるんですけどね

上２つ、下3つに対してスタイルを変えるしかない？？

完全にゴリ押しです。
cssみたいに何かしら方法があるかと思って色々と検索しましたが、めぼしい情報には行き当たらなかったです

GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 4.2,
              ),
              itemCount: categories.length,
              itemBuilder: (context, index) {
                final category = categories[index];
                BoxDecoration decoration;
                if (index == 0 || index == 1) {
                  // 最初の2つの場合
                  decoration = const BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                      right: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                      bottom: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                    ),
                  );
                } else if (index == categories.length - 1 ||
                    index == categories.length - 2) {
                  // 最後の2つの場合
                  decoration = const BoxDecoration(
                    border: Border(
                      right: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                      bottom: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                    ),
                  );
                } else {
                  // それ以外の場合
                  decoration = const BoxDecoration(
                    border: Border(
                      right: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                      bottom: BorderSide(
                        width: 0.5,
                        color: Palette.deepGrey,
                      ),
                    ),
                  );
                }
                return GestureDetector(
                  onTap: () {
                    // 省略
                  },
                  child: Container(
                    width: double.infinity,
                    height: double.infinity,
                    alignment: Alignment.center,
                    decoration: decoration,
                    child: Text(
                      categories[index].name,
                    ),
                  ),
                );
              },
            ),

GridView.builderのindexで何コメのContainerかを判断し、個別でborderの太さを変更しました。。
もし3カラムならifの条件式はさらに長くなります。

もしcssのように簡単に枠線の重なりを解消できる方法があれば教えてください！！