Flutterのマテリアル構造とレイアウト ~グリッド形式でカードを追加する~

5. グリッド形式でカードを追加する

GridView を追加する

• アイテム数が固定されていて、列数も決まっているので、GridView.count()を使用する
• プロパティは以下の4つ
• crossAxisCount:(必須)
  • 列数を指定
• padding: (省略可能)
  • グリッド全体の内側の余白を指定
  • EdgeInsetsクラスを使用して、上下左右の余白を個別に設定できる
  • 例: padding: EdgeInsets.all(8.0) (上下左右に8.0の余白)
• childAspectRatio:(省略可能)
  • アイテムの縦横比を指定
  • childAspectRatio: 1.0とすると、正方形のアイテムが作成される
• children:(必須)
  • グリッドに表示するウィジェットのリストを指定する
  • List型で、複数のウィジェットを[]で囲んで指定する

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TutorialHome(),
    ),
  );
}

class TutorialHome extends StatelessWidget {
  const TutorialHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: "menu",
            ),
            onPressed: () { print("menu!"); },
        ),
        actions: <Widget>[
          IconButton(
            onPressed:  () {print("alarmed!");}, 
          icon: const Icon(
            Icons.access_alarm,
            )
          ),
          IconButton(
            onPressed: () {print("searched!");}, 
            icon: const Icon(
              Icons.search,
              )),
        ],
        title: const Text('Example title'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        padding: const EdgeInsets.all(16.0),
        childAspectRatio: 8.0 / 9.0,
        children: <Widget>[Card()],
      ),
    );
  }
}

Card()を実装する

• Card()ウィジット
  • clipBehavior:プロパティ
    • カードのコンテンツがカードの境界線からはみ出した際の表示方法を指定
  • child:プロパティ
    • カード内に表示するコンテンツを指定
• childプロパティに渡したColumnウィジェット
  • crossAxisAlignment:プロパティ
    • 子ウィジェットを主軸と交差する軸に沿ってどのように整列させるかを指定するためのプロパティ
  • children:プロパティ
    • Column ウィジェット内に表示する子ウィジェットのリストを指定
    • AspectRatioウィジェット
      • 子ウィジェットのアスペクト比（縦横比）を指定された比率に保つ
      • aspectRatioプロパティ
        • アスペクト比を指定
      • childプロパティ
        • アスペクト比を固定したいウィジェットを指定

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TutorialHome(),
    ),
  );
}

class TutorialHome extends StatelessWidget {
  const TutorialHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: "menu",
            ),
            onPressed: () { print("menu!"); },
        ),
        actions: <Widget>[
          IconButton(
            onPressed:  () {print("alarmed!");}, 
          icon: const Icon(
            Icons.access_alarm,
            )
          ),
          IconButton(
            onPressed: () {print("searched!");}, 
            icon: const Icon(
              Icons.search,
              )),
        ],
        title: const Text('Example title'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        padding: const EdgeInsets.all(16.0),
        childAspectRatio: 8.0 / 9.0,
        children: <Widget>[
          Card(
            clipBehavior: Clip.antiAlias,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 18.0 / 11.0,
                  child: Image.asset('assets/Android.png')                  
                  ),
                const Padding(
                  padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("AndroidList"),
                      SizedBox(height: 8.0),
                      Text("android")
                    ],
                  ),
                  ),
              ]
            )
          )
          ],
      ),
    );
  }
}