FlutterでGridViewに境界線を引く方法

Flutter開発においてGridViewはアイテムを並べるときに便利なWidgetですが、装飾系のプロパティが存在していないため、境界線を引きたい場合に工夫が必要でした。
この記事では、末尾以外の行に下線を引くことで境界線を表現する方法を紹介します。

完成イメージ

実装の流れ

今回は以下の流れで実装していきます。

• 4列固定のGridViewを作成
• アイテム数から行数を動的に算出
• 末尾の行でなければ下線を引く（境界線の表現）

GridViewの作成

最初に単純な4列のグリッドを作ります。

import 'package:flutter/material.dart';

class GridViewBorderSample extends StatelessWidget {
  GridViewBorderSample({super.key});

  final List<String> items = List<String>.generate(15, (int index) => '$index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Border Sample'),
        centerTitle: true,
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4, // 列数の指定
        ),
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return Center(child: Text(items[index]));
        },
      ),
    );
  }
}

末尾行の判定

次に「末尾の行かどうか」を判定するロジックを追加します。

const int crossAxisCount = 4;
final int totalRows = (items.length / crossAxisCount).ceil();
final int rowIndex = (index / crossAxisCount).floor();
final bool isLastRow = rowIndex == totalRows - 1;

ceil...小数点以下を切り上げ
floor...小数点以下を切り捨て

下線を引く

最後にContainerのdecorationプロパティを使って、末尾行以外の場合のみ下線を引くようにします。

@override
Widget build(BuildContext context) {
  const int crossAxisCount = 4;

  return Scaffold(
    appBar: AppBar(
      title: const Text('Border Sample'),
      centerTitle: true,
    ),
    body: GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount,
      ),
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        final int totalRows = (items.length / crossAxisCount).ceil();
        final int rowIndex = (index / crossAxisCount).floor();
        final bool isLastRow = rowIndex == totalRows - 1;

        return Container(
          // 末尾行以外なら下線を引く
          decoration: BoxDecoration(
            border: Border(
              bottom: isLastRow
                  ? BorderSide.none
                  : const BorderSide(color: Colors.grey),
            ),
          ),
          child: Center(
            child: Text(items[index]),
          ),
        );
      },
    ),
  );
}

おわりに

装飾可能なWidgetを組み合わせることで境界線を表現することができました。

今回は横の境界線を引きましたが、列の判定を行うようにすれば縦の境界線も引くことが可能なので、興味がある方は試してみてください。

株式会社ボトルキューブではFlutterを使ったお仕事を募集中です。
お問い合わせは下記リンク先のフォームからご連絡ください。