📕

Flutterの勉強をします! GridView編 パート1

2022/09/14に公開約3,700字

よし、Flutterを頑張ろう!

最近まで、Next.jsとTailwind cssの勉強を頑張ろうと意気込んでいましたが、急遽Flutterを勉強する必要ができました。

よって、今から少しNext.jsの勉強をお休みして、Flutterの学習に時間を当てたいと思います。

これからの記事はそのアウトプットとしての勉強記録として残していきます。
読んでもらえた方も参考になれば幸いです。

現状の環境

  • Windows11
  • VScodeでFlutterを使用予定
  • Android Studio からPixel4 を使用

いろいろ環境構築に四苦八苦しながら、WindowsではやはりIOSのエミュレーターは用意できないことは残念に思いました。
まぁ、やりようによってはできるみたいなサイトをちらちら見かけましたが、ハードルが高く感じましたし、公式なやり方でもないのでスルーしました。

前置きとして

レイアウトに関しては、この日本語でまとめられたFlutterのドキュメントを見てみると大体のことは理解できます。

これからまとめていく内容はウィジェットの細かい解説まではまとめようと思っていません。
このウィジェットはよくわからないなと感じた場合は、僕の拙い説明を望むよりドキュメントを見ることをお勧めします。その方がわかりやすいです。

GridView を使ってみる

それでは本題に入りまして、グリッドを使ったレイアウトを作ってみたいと思います。
まずは、状態が変更できる StatefulWidget のひな型を用意します。
名前は GridViewSample と定義しています。

※main.dartとは別ファイルに書いています。
※main.dartのコードは記事の一番下に追記してあります。

grid_view.dart
import 'package:flutter/material.dart';

class GridViewSample extends StatefulWidget {
  const GridViewSample({super.key});

  
  State<GridViewSample> createState() => _GridViewSampleState();
}

class _GridViewSampleState extends State<GridViewSample> {
  
  Widget build(BuildContext context) {
    // return で返すScaffoldの中にレイアウトをこれから実装していく。
    return Scaffold();
  }
}

Scaffold という定型的に使用するウィジェットの中に、

  • appBar
  • floatingActionButton
  • body

の3つの要素を使用していきます。

grid_view.dart
class _GridViewSampleState extends State<GridViewSample> {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("グリッドレイアウト"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (() {}),
      ),
      body: const Text("ここをGridViewに置き換えていきます"),
    );
  }
}

この段階のスマホ画面はこんな感じです。

GridView は無限スクロールを想定してやるので、その場合は GridView.builder を利用します。

GridView.builder には引数の指定があり、

  • gridDelegate (グリッドの表示設定)
  • itemBuilder (グリッドの要素)

という役割を持っています。
グリッドの表示設定は3列での表示を行いたいと思うので、
SliverGridDelegateWithFixedCrossAxisCount
を使います。

grid_view.dart
class _GridViewSampleState extends State<GridViewSample> {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("グリッドレイアウト"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (() {}),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, crossAxisSpacing: 4, mainAxisSpacing: 4),
        itemBuilder: ((context, index) => Container(
              color: Colors.teal,
            )),
      ),
    );
  }
}

この状態で、スマホ画面は、

このようになりました。
ひとまず簡単なグリッドのこんな感じです。

終わりに

今回はごく簡単にGridViewを利用して簡単にグリッドのレイアウトを作成するところまでをやってみました。

この後はパート2として、floatingActionButtonボタンからグリッドの列数の変更ができるように実装してみたいと思います。

Flutterの勉強をします! GridView編 パート2

追記

コードについてですが、main.dartには書いていませんでした。
そこの配慮が足りていなかったので、main.dart側のコードも載せておきます。
main.dartに作成したgrid_view.dartファイルを呼び込んで表示させています。

main.dart
import 'package:flutter/material.dart';
import 'package:flutter_app/sample/Grid/grid_view.dart';

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

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

  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const GridViewSample(),
    );
  }
}

Discussion

ログインするとコメントできます