[Flutter]DataTableのチェックボックス(checkbox)の表示(show)・非表示(hide)を切り替える(swicth)方法

どうも、ちょげ(@chogetarou)です。

DataTableのチェックボックスの表示と非表示を切り替える方法を紹介します。

方法
使用例

方法

DataTableのチェックボックスの表示と非表示を切り替えるには、引数「showCheckboxColumn」を使います。

まず、チェックボックスを表示するかどうかの変数を用意します。

bool _isShowCheckbox = false;

次に、用意した変数をDataTableの引数「showCheckboxColumn」に設定します。

DataTable(
  showCheckboxColumn: _isShowCheckbox,
  columns: [・・・],
  rows: [・・・],
),

あとは、ボタンなどで変数の値を切り替えることで、チェックボックスの表示・非表示を切り替えることが出来ます。

setState(() {
  _isShowCheckbox = !_isShowCheckbox;
});

これでDataTableのチェックボックスの表示・非表示を切り替えることが出来ます。

使用例

以下は、使用例です。

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

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool _isShowCheckbox = false;
  List<Map> _list = List.generate(
    10,
    (index) => {
      'check': false,
      'name': 'Product $index',
      'price': Random().nextInt(300) + 1,
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            DataTable(
              showCheckboxColumn: _isShowCheckbox,
              columns: [
                DataColumn(
                  label: Text('名前'),
                ),
                DataColumn(
                  label: Text('値段'),
                ),
              ],
              rows: _list
                  .map(
                    (e) => DataRow(
                      selected: e['check'],
                      onSelectChanged: (bool? selected) {
                        setState(() {
                          e['check'] = selected;
                        });
                      },
                      cells: [
                        DataCell(
                          Text('${e['name']}'),
                        ),
                        DataCell(
                          Text('${e['price']}円'),
                        ),
                      ],
                    ),
                  )
                  .toList(),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isShowCheckbox = !_isShowCheckbox;
                });
              },
              child: Text('Switch'),
            )
          ],
        ),
      ),
    );
  }
}