🥎

GridPaper class

2023/07/17に公開

画面全体にGrid線を広げる

領域見たいだけなら GridPaper でラップした方が楽ですよ
最近、私が作ったオンラインサロンに入ってくれた人から教わった面白いWidgetがあったので、ご紹介します。
https://api.flutter.dev/flutter/widgets/GridPaper-class.html

参考にした海外の動画

📃使い方

画面全体にグリッド線が広がるように、SizedBoxとdouble.infinityを使い、GridPaperの線が広がるように設定する。

body: SizedBox(
          height: double.infinity, // 画面いっぱいに広げる
          width: double.infinity, // 画面いっぱいに広げる
          child: GridPaper(
            color: Colors.blue, // 青い線
            divisions: 1, // 1行
            interval: 210, // 210ピクセルごとに線を引く
            subdivisions: 6, // 1行を6分割
          ),
        ));

全体のコード
こんな感じで使います。

import 'package:flutter/material.dart';

class DataTablePage extends StatelessWidget {
  const DataTablePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('DataTable'),
        ),
        body: SizedBox(
          height: double.infinity, // 画面いっぱいに広げる
          width: double.infinity, // 画面いっぱいに広げる
          child: GridPaper(
            color: Colors.blue, // 青い線
            divisions: 1, // 1行
            interval: 210, // 210ピクセルごとに線を引く
            subdivisions: 6, // 1行を6分割
          ),
        ));
  }
}

⭕️🔸図形を追加してみた

Widgetを配置すると、今どの領域にいるのかが、わかりやすくなりました!

import 'package:flutter/material.dart';

class DataTablePage extends StatelessWidget {
  const DataTablePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('DataTable'),
        ),
        body: SizedBox(
          height: double.infinity, // 画面いっぱいに広げる
          width: double.infinity, // 画面いっぱいに広げる
          child: GridPaper(
            color: Colors.blue, // 青い線
            divisions: 1, // 1行
            interval: 210, // 210ピクセルごとに線を引く
            subdivisions: 6, // 1行を6分割
            child: Column(
              children: [
                Row(
                  children: [
                    Text('hogehoge'),
                    const SizedBox(width: 10),
                    Text('hogehoge'),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      color: Colors.red,
                      height: 100,
                      width: 100,
                    ),
                    Container(
                      color: Colors.blue,
                      height: 100,
                      width: 100,
                    ),
                  ],
                ),
                Column(
                  children: [
                    Container(
                      color: Colors.red,
                      height: 100,
                      width: 100,
                    ),
                    Container(
                      color: Colors.blue,
                      height: 100,
                      width: 100,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ));
  }
}

FlutterWebだと面積が広いですね

モバイルだとこんな感じで確認できます

いい感じの使い方
グリッド線をつけるところは、全体ではなくて特定の範囲だけが良いと知人から教わりました💦
確かに、全体に使うのもわかりずらいか。

まとめ

最近は、Containerでラップして、色をつけてどれぐらいの面積を使っているのか調べていましたが、このウイジェット使ったほうが、いいかもですね。皆さんも試してみてください。

画面全体にGrid線を広げる

📃使い方

⭕️🔸図形を追加してみた

まとめ

Discussion