FlutterでGirdViewを出す

今回はSliverGridViewを使って表示します。

GridViewにはそもそも２種類ある

FlutterではGridViewは GridView と SliverGridView の２種類あります。

それぞれには明確な違いがあり、 SliverGridVew は CustomScrollView にネストしないと表示することができません。
GridView はネストしなくても表示できます。

SliverGridViewの実装

実装は下記になります。

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';
import 'package:flutter/material.dart';

class TimeLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 5,
              crossAxisSpacing: 5,
              childAspectRatio: 0.5625,
            ),
            delegate: SliverChildListDelegate(
              List.generate(
                30,
                (int i) {
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: new BorderRadius.all(
                        const Radius.circular(10),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

(これはあくまで例です。)

SliverGridViewの使い所

SliverGriViewの使いどころはいろんな要素のあるViewを表示するときに使います。
例えば下記のような構成のUIがあった場合に一緒に全てをスクロールするときにする場合などに使います。

-------------
appbar
list
grid
list
view
----------

実装方法としては CustomScrollView の slivers の中にネストさせて表示したりさせます。

以上です。