【ITニュース解説】FlutterでGridViewに境界線を引く方法

システムエンジニアを目指す初心者がアプリ開発の世界に足を踏み入れるとき、Flutterは非常に魅力的な選択肢となる。FlutterはGoogleが開発したUIフレームワークで、一つのコードベースからiOSやAndroidなど様々なプラットフォーム向けに美しいアプリケーションを開発できる。このFlutterでアプリの画面を構成する際、ほとんどすべての要素が「Widget（ウィジェット）」と呼ばれる部品でできていることを知っておく必要がある。ボタンやテキスト表示はもちろんのこと、画面全体のレイアウトもすべてWidgetの組み合わせによって実現されるのだ。

今回注目する「GridView」も、そうしたWidgetの一つだ。GridViewは、複数のアイテムを格子状、つまりグリッド形式に並べて表示するためのWidgetで、写真ギャラリーや商品一覧のように、たくさんの要素を規則正しく配置したい場合に非常に便利に使われる。例えば、ショッピングアプリでカテゴリ別の商品を一覧表示したり、画像編集アプリでサムネイル画像をたくさん並べたりするときに活躍するだろう。

しかし、この便利なGridViewには、一つ工夫が必要な点がある。それは、各アイテムの間に「境界線」を直接引くためのプロパティ（Widgetの設定項目）が、標準では用意されていないことだ。多くのUIフレームワークでは、Widgetが持つ機能は、そのWidgetの核となる役割に絞られていることが多い。これは、開発者に高い柔軟性を提供し、様々なデザインに対応できるようにするためだ。もし最初から全てのWidgetに多種多様な装飾プロパティを持たせてしまうと、Widget自体が複雑になりすぎたり、特定のデザインにしか対応できなかったりする可能性がある。そのため、GridViewもアイテムをグリッド状に配置するという本質的な機能に特化しており、アイテム間の境界線のような装飾は、他のWidgetを組み合わせて実現するのが一般的なアプローチとなる。

そこで、この記事で紹介されているのは、GridViewのアイテム間に境界線がないという課題に対して、非常に実用的かつ効果的な解決策だ。それは、直接的に境界線を引くのではなく、各アイテムに「下線」を引くことで、見た目上、境界線があるかのように見せかけるという工夫である。これは、まるで部屋の床に敷かれたタイルの間に目地が入っているように、各アイテムの下に一本の線を引くことで、自然な区切りを表現する方法だ。

この方法を実装するには、まずGridViewの各アイテムがどのように構成されているかを理解する必要がある。GridViewは、その中に表示するアイテム一つ一つを、個別のWidgetとして受け取り、それらをグリッド状に配置する。それぞれのアイテムWidgetは、通常、Containerという汎用的なWidgetで包まれることが多い。Container Widgetは、他のWidgetを囲み、背景色を設定したり、余白を設けたり、そして今回のポイントである「境界線（ボーダー）」を設定したりするのに非常に便利なWidgetだ。

Containerに境界線を設定するには、decorationというプロパティにBoxDecorationというクラスを指定する。BoxDecorationは、Widgetの見た目を装飾するための様々な設定項目を持っており、その中にborderというプロパティがある。このborderプロパティを使うことで、Widgetの四方に線（ボーダー）を引くことができるが、今回は全面に線を引くのではなく、下線だけを引くことが目標だ。

特定の方向だけに境界線を引く場合、BoxDecorationのborderプロパティにBorder.all()のように四方全てに線を引くのではなく、Border(bottom: BorderSide(...))のように指定する。ここでBorderSideというクラスを使うことで、線の色や太さといった具体的なスタイルを設定できる。例えば、BorderSide(color: Colors.grey, width: 1.0)と指定すれば、灰色で太さ1.0ピクセルの下線が引かれることになる。

ここまでは各アイテムに下線を引く方法だが、この解決策の最も賢明な点は、「末尾以外の行に下線を引く」という条件付けにある。もしすべてのアイテムに無差別に下線を引いてしまうと、GridViewの一番下の行、つまり全体の末尾の行にあるアイテムの下にも線が引かれてしまう。これでは、まるでGridView全体がもう一つ下のグリッドと区切られているように見えてしまい、求めている各アイテム間の区切り線としては不自然な見た目になる。

例えば、全部で10個のアイテムがあり、1行に3個ずつ並べる設定だと仮定しよう。すると、1行目にはアイテム1, 2, 3が、2行目にはアイテム4, 5, 6が、3行目にはアイテム7, 8, 9が、そして4行目にはアイテム10が並ぶことになる。このとき、下線を引くべきではないのは、アイテム8, 9, 10の下に引かれるはずの線だ。なぜなら、アイテム8, 9, 10がそれぞれ3行目と4行目の最終行に位置しているからだ。特にアイテム10は最後の行で、その下に線を引くと全体の外枠のように見えてしまい、求めているグリッド内の区切りとは異なる印象を与えてしまう。

したがって、アイテムの総数と1行あたりのアイテム数から、現在処理しているアイテムが属する行が最終行かどうかを判断し、最終行でなければ下線を引く、という条件分岐を設ける必要がある。具体的には、GridViewのアイテムを動的に生成するGridView.builderのようなコンストラクタを利用する際に、itemBuilderという、各アイテムを生成する関数の中で、現在のアイテムのインデックス（何番目のアイテムか）と、1行に表示するアイテムの数を基に、そのアイテムが属する行を計算し、その行がGridView全体の最終行に当たるのかどうかを見極めるロジックを組むことになる。この計算によって、不要な下線を省き、見た目の美しさを保つことができるのだ。

この方法は、GridViewが直接境界線機能を持たないという制約を、FlutterのWidgetの柔軟な組み合わせと、簡単な計算ロジックによって見事に克服している。開発者は、用意されているWidgetの機能だけでなく、それらをどのように組み合わせ、どのような条件分岐を加えることで、より複雑なUI表現やデザイン要件を満たすことができるのかという、Flutter開発における重要な考え方を学ぶことができるだろう。線の色や太さも自由に調整できるため、アプリのデザインに合わせて様々なスタイルの境界線を表現することが可能になり、ユーザーにとってより見やすく、使いやすいアプリケーションの作成に繋がるはずだ。