0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

はじめに

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

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

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?