DataTable

テーブルを作ることができるウイジェット

テーブルを作ることができるウイジェットがあるんですけど、DataTableは追加やすかった!
https://api.flutter.dev/flutter/material/DataTable-class.html
https://www.youtube.com/watch?v=ktTajqbhIcY

以前使ってたTableというウイジェットは使いにくかったですね💦
https://api.flutter.dev/flutter/widgets/Table-class.html

モバイルだとこんな感じになります

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: DataTable(
          // 列を規定する
          columns: [
            DataColumn(label: Text('名前')),
            DataColumn(label: Text('年齢')),
            DataColumn(label: Text('誕生日')),
          ],
          // 各行とセルを規定する
          rows: [
            DataRow(cells: [
              DataCell(Text('田中太郎')),
              DataCell(Text('25')),
              DataCell(Text('1989年3月27日')),
            ]),
            DataRow(cells: [
              DataCell(Text('山田花子')),
              DataCell(Text('23')),
              DataCell(Text('1992年5月16日')),
            ]),
            DataRow(cells: [
              DataCell(Text('佐藤茂雄')),
              DataCell(Text('28')),
              DataCell(Text('1985年9月9日')),
            ]),
          ],
        ));
  }
}

📈ダッシュボードみたいなUI

最近、FlutterWebでお仕事していて、ダッシュボード画面を作ることが多いので、DataTableを使ってそれっぽい画面を作ってみました!

import 'package:flutter/material.dart';

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

  @override
  State<DataTablePage> createState() => _DataTablePageState();
}

class _DataTablePageState extends State<DataTablePage> {
  bool _isCheckedOne = false;
  bool _isCheckedTwo = false;
  bool _isCheckedThree = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('DataTable'),
        ),
        body: DataTable(
          // 列を規定する
          columns: [
            DataColumn(label: Text('チェック')),
            DataColumn(label: Text('名前')),
            DataColumn(label: Text('年齢')),
            DataColumn(label: Text('性別')),
            DataColumn(label: Text('誕生日')),
            DataColumn(label: Text('住所')),
            DataColumn(label: Text('電話番号')),
          ],
          // 各行とセルを規定する
          rows: [
            DataRow(cells: [
              DataCell(Checkbox(
                  value: _isCheckedOne,
                  onChanged: (value) {
                    setState(() {
                      _isCheckedOne = !_isCheckedOne;
                    });
                  })),
              DataCell(Text('田中太郎')),
              DataCell(Text('25')),
              DataCell(Text('男性')),
              DataCell(Text('1989年3月27日')),
              DataCell(Text('東京都〇〇区')),
              DataCell(Text('000-0000-0000')),
            ]),
            DataRow(cells: [
              DataCell(Checkbox(
                  value: _isCheckedTwo,
                  onChanged: (value) {
                    setState(() {
                      _isCheckedTwo = !_isCheckedTwo;
                    });
                  })),
              DataCell(Text('山田花子')),
              DataCell(Text('23')),
              DataCell(Text('女性')),
              DataCell(Text('1992年5月16日')),
              DataCell(Text('東京都〇〇区')),
              DataCell(Text('000-0000-0000')),
            ]),
            DataRow(cells: [
              DataCell(Checkbox(
                  value: _isCheckedThree,
                  onChanged: (value) {
                    setState(() {
                      _isCheckedThree = !_isCheckedThree;
                    });
                  })),
              DataCell(Text('茂雄')),
              DataCell(Text('28')),
              DataCell(Text('男性')),
              DataCell(Text('1985年9月9日')),
              DataCell(Text('東京都〇〇区')),
              DataCell(Text('000-0000-0000')),
            ]),
          ],
        ));
  }
}

まとめ

最近は、エンジニアさんと交流が増えてもっと便利なウイジェットがあるのを紹介されて使ってみて、以前は作ることが苦労したUIが早く作れるようになりました!
これを機に自分のコミュニティの活動を活発にしていきたいですね。私とレベル高い人しか最近アクティブでないので、もっと他のメンバーにも情報発信や技術交流をして欲しいです。