Flutter GridView.builderで作るContainerの枠線が重なって太くなる時の解決策

# はじめに
![Screenshot 2023-06-02 at 19.12.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/ab8b62e3-1fc6-3004-371e-075c3f5bb707.png)
こんな感じで`GridView.builder`で`Container`を複数配置するレイアウトがあったとします。
`Container`の周りには枠線をつけると、👆の**図のように重なっている部分がどうしても線が太くなってしまうんですよね・・・**

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

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

https://ueyama.blog/?p=164

# 上２つ、下3つに対してスタイルを変えるしかない？？
完全にゴリ押しです。
cssみたいに何かしら方法があるかと思って色々と検索しましたが、めぼしい情報には行き当たらなかったです:frowning2:

```dart
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のように簡単に枠線の重なりを解消できる方法があれば教えてください！！