FlutterでExcelポイUIを作る

面白そうだからやってみた!

業務で、Tableウイジェットを使う機会があり、セルに色をつけると、セル毎に高さが違って、見た目が悪くてなってしまいました。
BoxConstraintsを使えば、色をつけたセルを同じ高さにして、レイアウトを綺麗にできました。
https://qiita.com/ling350181/items/9e927826f1164c9205b1

で、ExcelポイUI作れるだろと思ってやってみました!
全体のコード

main.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // ダミーのデータ
    List<String> select = List<String>.generate(10, (index) => '');
    List<String> companyName = List<String>.generate(10, (index) => '〇〇株式会社');
    List<String> phoneNumber =
        List<String>.generate(10, (index) => '098-000-0000');
    List<String> fax = List<String>.generate(10, (index) => '098-000-0000');
    List<String> address =
        List<String>.generate(10, (index) => '埼玉県〇〇市〇〇1−1−1');

    return Scaffold(
      appBar: AppBar(
        title: const Text('Excel Ui'),
      ),
      body: // テーブルを配置
          Container(
        margin: EdgeInsets.symmetric(horizontal: 40),
        child: Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          children: [
            // ヘッダー部分
            TableRow(
              children: [
                TableCell(
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.all(8),
                    child: Center(
                        child:
                            Text('選択', style: TextStyle(color: Colors.white))),
                  ),
                ),
                TableCell(
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.all(8),
                    child: Center(
                        child:
                            Text('会社名', style: TextStyle(color: Colors.white))),
                  ),
                ),
                TableCell(
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.all(8),
                    child: Center(
                        child: Text('電話番号',
                            style: TextStyle(color: Colors.white))),
                  ),
                ),
                TableCell(
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.all(8),
                    child: Center(
                        child: Text('FAX番号',
                            style: TextStyle(color: Colors.white))),
                  ),
                ),
                TableCell(
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.all(8),
                    child: Center(
                        child:
                            Text('住所', style: TextStyle(color: Colors.white))),
                  ),
                ),
              ],
            ),
            // データ部分
            for (int i = 0; i < 10; i++)
              TableRow(
                children: [
                  TableCell(
                    child: Container(
                      constraints:
                          BoxConstraints(minHeight: 50), // ここで最小の高さを設定します。
                      color: i % 2 == 0 ? Colors.white : Colors.grey[200],
                      padding: const EdgeInsets.all(8),
                      child: Center(child: Text(select[i])),
                    ),
                  ),
                  TableCell(
                    child: Container(
                      constraints:
                          BoxConstraints(minHeight: 50), // ここで最小の高さを設定します。
                      color: i % 2 == 0 ? Colors.white : Colors.grey[200],
                      padding: const EdgeInsets.all(8),
                      child: Center(child: Text(companyName[i])),
                    ),
                  ),
                  TableCell(
                    child: Container(
                      constraints:
                          BoxConstraints(minHeight: 50), // ここで最小の高さを設定します。
                      color: i % 2 == 0 ? Colors.white : Colors.grey[200],
                      padding: const EdgeInsets.all(8),
                      child: Center(child: Text(phoneNumber[i])),
                    ),
                  ),
                  TableCell(
                    child: Container(
                      constraints:
                          BoxConstraints(minHeight: 50), // ここで最小の高さを設定します。
                      color: i % 2 == 0 ? Colors.white : Colors.grey[200],
                      padding: const EdgeInsets.all(8),
                      child: Center(child: Text(fax[i])),
                    ),
                  ),
                  TableCell(
                    child: Container(
                      constraints:
                          BoxConstraints(minHeight: 50), // ここで最小の高さを設定します。
                      color: i % 2 == 0 ? Colors.white : Colors.grey[200],
                      padding: const EdgeInsets.all(8),
                      child: Center(child: Text(address[i])),
                    ),
                  ),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

💹こんな感じです

今回のポイントは、２行目のセルは、グレーにして、グレーの部分は、色をつけると見た目が崩れるので、BoxConstraintsを使用して、レイアウトを調整しました。

TableCell(
    child: Container(
      constraints:
	  BoxConstraints(minHeight: 50), // ここで最小の高さを設定します。
      color: i % 2 == 0 ? Colors.white : Colors.grey[200],
      padding: const EdgeInsets.all(8),
      child: Center(child: Text(fax[i])),
    ),
  ),

最後に

今回は、ダミーのデータを使って、for文でループして、セルを１０行表示する処理をやってみました。たまには、こんな面白いもの作りたいですね。私は、Excel嫌いですけどね笑