【第2回】状態とGridViewについて

これ本当にポエムです？

昨日はポエムだったけど、今日のはポエムっぽくないと思い、ポエムタグ外しています。

Flutter初心者が、「何か」をリリースするまでの記録、第2回目です。

本日は頭の中のアイディアを具現化しようと思ってとりあえず「3×3のビンゴのようなのできるかい？」と伝えてみたところ、このようなコードが届きました。

sample.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Center( // 中央寄せ
          child: Container(
            width: 300, // 全体の幅
            height: 300, // 全体の高さ
            child: GridView.count(
              crossAxisCount: 3, // 横方向のマス数
              children: List.generate(9, (index) {
                return Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white, width: 2), // 枠線
                    color: Colors.black12, // 背景色
                  ),
                  child: Center(
                    child: Text(
                      '${index + 1}', // マス番号
                      style: TextStyle(fontSize: 24, color: Colors.white),
                    ),
                  ),
                );
              }),
            ),
          ),
        ),
      ),
    );
  }
}

こんな感じです。
これは所謂ショッピングサイトとか、インスタとか、タイル状に写真が表示できるようになるってことね。

気になった箇所を備忘も兼ねて説明します。

状態　StatelessWidgetとStatefulWidget

このStatelessWidgetというのは、状態を持たないwidgetのことです。要するに静止している画像や固定されている背景、状態をもたない物の塊です。

反対にStatefulWidgetは状態を持つwidgetのことで、何かしらの動作をしたらその物体が動いたり、消えたり伸びたり遷移したり、そんなことができる塊です。

今回はDEMOですし状態は持たなくて良いので、StatelessWidgetになっております。

GridView

タイル状のあれです。
調べてみると
GridView.count
GridView.extent
GridView.builder
GridView.custom
の４つがあるそうで、本日は一番上を使っています（他の3つはまたの機会に。）

crossAxisCount: 3, // 横方向のマス数
これで3列横に並べますよ、と描画するようにしております。

数字を変更すれば列・何個タイルを作成するのかも変化させることが可能です。
あと何気にすごいなと思ったのはスクロールも可能ということです（画面に入りきらないのでそれは当然と言えば当然かもですが）

まだ頭の中のものに近づいてはおりませんが、明日も勉強したいと思います（なるべく毎日投稿したい）

読んでいただきありがとうございました！