GridViewでコンテンツを一覧表示 -ひとりアドベントカレンダー Flutter編 2018 その1-

iPhoneが登場したあとはスマートフォンでの一覧表示といえばリスト表示というのが一般的でしたが、コンテンツの主役ががテキストからイメージに変わってきたこともありグリッド表示というのも一般的になってきました。
ということで、第一回目はGridVIewを使ってみたいと思います。

明日以降の予定は目次を参照してください。

さて、FlutterでのGridViewですが、利用方法が5つ用意されています。

CustomやExtentなどは名前からややこしそうなので、今回は素直にBuilderを利用してみます。

実装はこんな感じにしてみました。

class MaterialIconsViewer extends StatelessWidget {
  final List<IconData> icons = [
    Icons.access_alarm,
    Icons.arrow_back_ios,
    Icons.account_balance_wallet,
    Icons.center_focus_weak,
    Icons.blur_on,
    Icons.dashboard,
    Icons.phone,
    Icons.tap_and_play,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Material Icons Viewer"),
      ),
      body: GridView.builder(
        itemCount: icons.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
        ),
        itemBuilder: (context, index) {
          return Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black45),
            ),
            child: Icon(icons[index], size: 50),
          );
        },
      ),
    );
  }
}

（noteのコードエディタ、せめて拡張子が指定できるようにしたらハイライトもキレイにできるようになりそうなのに...）

IconDataの配列をもとにしてGridViewを作ってます。GridViewにはアイテム数とグリッド全体の表示方法、各アイテムの表示方法を指定します。delegateやbuilderなどを見ると少し難しい感じがしますが、delegeteはすでに定義済みのものを利用するだけですし、builderでは実際に表示させるWidgetを返すだけですので全然難しくありません。

itemCount
その名の通りアイテム数を渡します。ここで指定した数の回数で後述するitemBuilderが呼ばれます。

gridDelegate
今回は「SliverGridDelegateWithFixedCrossAxisCount」を渡しています。今回は列数のみを指定していますが、各アイテムの縦横比やアイテム間の間隔などを指定できます。
他には、「SliverGridDelegateWithMaxCrossAxisExtent」というのもあります。こちらは行数を指定して横に伸ばしていく感じで利用するようです。

itemBuilder
には今回は外枠をつけただけのContainerを指定してます。

実際に表示される内容はこんな感じです。隙間なしの4列表示で指定したアイコンが表示されました。

明日は装飾を加えて見栄えを調整してみます。

・・・

コードとスクリーンショットを準備すると、一つの記事でもそれなりに手間がかかっちゃう。24回は大変そうやわ。

・・・

Twitterにもちょくちょく顔を出しています。