Zenn
⛳

【Flutter】リスト系UI。特にGridViewとPageViewについて

2023/04/29に公開
Flutter
Dart
tech

ListView, SingleChildScrollView, GridView, PageView

ListViewは、Flutterで使用されるスクロール可能なリストを実装するためのウィジェットです。
SingleChildScrollViewは、Flutterで単一の子ウィジェットをスクロール可能にするためのウィジェットです。
GridViewは、Flutterで二次元のスクロール可能なグリッドを作成するためのウィジェットです。
PageViewは、Flutterで水平方向にスワイプ可能なページを実装するためのウィジェットです。

ListViewとSingleChildScrollViewは何となく理解できるのですが、GridViewとPageViewは上記だけでは、いまいち理解できないので、GridViewとPageViewについて深堀していきたいと思います。

GridView

GridViewは主に、アイテムや要素を縦横のマトリックスに並べたい時に使用されます。

主な機能としては以下です。

  • 子ウィジェットをグリッド状に整列させる
  • スクロールの方向（縦・横）を指定できる
  • セル間のスペース（padding, margin）を設定できる
  • グリッドのアイテム数を動的に変更できる

GridViewのサンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView Example'),
        ),
        body: GridView.count(
          crossAxisCount: 3, // 一行に表示するアイテム数
          children: List.generate(50, (index) {
            return Center(
              child: Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline5,
              ),
            );
          }),
        ),
      ),
    );
  }
}

この例では、3列のグリッドレイアウトが作成され、50個のアイテムが表示されます。GridView.count コンストラクタを使用して、一行あたりのアイテム数を指定しています。

サンプルコードのUI

GridViewウィジェットは、画面サイズやデバイスの向きに応じて自動的に調整されるため、レスポンシブなデザインを容易に実現できます。さまざまな用途に応じて、上記のコンストラクタを使用してグリッドをカスタマイズできます。

PageView

PageViewは、ユーザーが異なるページやコンテンツをスワイプして簡単にナビゲートできるようにするために使用されます。特に、オンボーディング画面や、画像のカルーセル表示などでよく使われます。

主な機能としては以下です。

  • スクロール方向: 水平（デフォルト）または垂直のスクロール方向を設定できます。
  • ページスナップ: ページ間のスクロール時に、ページが自動的にスナップするかどうかを制御できます。
  • コントローラ: PageControllerを使って、アニメーションやページ遷移の制御ができます。
  • ページインディケータ: 現在のページ位置を示すために、カスタムページインディケータを実装できます。

PageViewのサンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PageView Example'),
        ),
        body: MyPageView(),
      ),
    );
  }
}

class MyPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: [
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue),
      ],
    );
  }
}

この例では、画面を左にスライドすると右から次の画面が出てくるようなプログラムになっています。

サンプルコードのUI

PageViewは、カスタマイズが容易で、多くのアプリケーションで使用されているため、Flutterでアプリを開発する際には重要なウィジェットです。

Discussion