【Flutter】DatatableのcheckboxがUI上でチェックされない

前提・問題点

現在、Flutter+Firebaseを利用してアプリ開発について学習を行っています。
その中でCloudFirestoreから持ってきたデータをDatatableに反映しているのですが、
Datatableのcheckboxがlogをみるとselectedがタップ時はTrueになっているので
反応はしているのですが、UI上でcheckboxにチェックつかず困っています。

なので、選択してから削除ボタンを押すと該当のデータは削除されます。
しかし、UI上にチェックがついていないので選択されたかどうかがわからない状態にあります。

解決方法をご存知の方がいましたら回答いただけると助かります。

補足情報（FW/ツールのバージョンなど）

使用したもの
cloud_firestore: ^0.13.7

以下実装したコード

dart:Datatable.dart
1import 'dart:math';
2import 'package:card_manager/add_deck_page.dart';
3import 'package:card_manager/add_record_page.dart';
4import 'package:card_manager/card_page.dart';
5import 'package:card_manager/main.dart';
6import 'package:card_manager/page_manager.dart';
7import 'package:cloud_firestore/cloud_firestore.dart';
8import 'package:flutter/cupertino.dart';
9import 'package:flutter/material.dart';
10import 'package:firebase_auth/firebase_auth.dart';
11import 'package:provider/provider.dart';
12
13import 'login_page.dart';
14
15class RecordPage extends StatefulWidget {
16  final String email;
17  final String name;
18
19  BattleRecordPage(this.name, this.email);
20
21  @override
22  _RecordPage createState() => _RecordPage();
23}
24
25class _RecordPage extends State<RecordPage> {
26
27  List<DocumentSnapshot> selectedRecords;
28
29
30  List<DocumentSnapshot> documents;
31
32
33  @override
34  void initState() {
35    // TODO: implement initState
36    super.initState();
37    selectedRecords = [];
38
39  }
40
41  onSelectedRow(bool selected, DocumentSnapshot document) async {
42    setState(() {
43      if (selected) {
44        selectedRecords.add(record);
45      } else {
46        selectedRecords.remove(document);
47      }
48    });
49  }
50
51  deleteSelected() async {
52    setState(() {
53      if (selectedRecords.isNotEmpty) {
54        List<DocumentSnapshot> temp = [];
55        temp.addAll(selectedRecords);
56        for (DocumentSnapshot record in temp) {
57          Firestore.instance
58              .collection("Records")
59              .document(record.documentId)
60              .delete();
61          selectedRecords.remove(record);
62        }
63      }
64    });
65  }
66  Widget recordData(documents) =>
67      DataTable(
68          showCheckboxColumn: true,
69          columns: const <DataColumn>[
70            DataColumn(
71                label: Text(
72                  "email",
73                  style: TextStyle(fontStyle: FontStyle.italic),
74                ),
75                numeric: false),
76            DataColumn(
77                label: Text(
78                  "name",
79                  style: TextStyle(fontStyle: FontStyle.italic),
80                ),
81                numeric: false),
82    
83          ],
84          rows: documents
85              .map<DataRow>((document) =>
86              DataRow(
87                  selected: selectedRecords.contains(document),
88                  onSelectChanged: (b) {
89                      onSelectedRow(b, document);
90                  },
91                  cells: <DataCell>[
92                        DataCell(Text(document["email"]),
93                            showEditIcon: false, placeholder: true),
94                        DataCell(Text(document["name"]),
95                            showEditIcon: false, placeholder: false),
96                  ]))
97              .toList());
98
99
100  @override
101  Widget build(BuildContext context) {
102    //ユーザ情報
103    final UserState userState = Provider.of<UserState>(context);
104
105    final FirebaseUser user = userState.user;
106    // TODO: implement build
107    return Scaffold(
108      appBar: AppBar(
109        title: Text("Record"),
110        actions: <Widget>[
111          IconButton(
112            icon: Icon(Icons.add),
113            onPressed: () async {
114              Navigator.pushNamed(context, AddRecord.routeName,
115                  arguments: AddRecord(widget.email, widget.name));
116            },
117          ),
118          IconButton(
119            icon: Icon(Icons.delete),
120            onPressed: () async {
121              await deleteSelected();
122            },
123          )
124        ],
125      ),
126      body: Column(
127        children: <Widget>[
128          Expanded(
129            //非同期処理の結果をもとにWidget作成
130            child: StreamBuilder<QuerySnapshot>(
131              //非同期処理結果→future
132                stream: Firestore.instance
133                    .collection("Records")
134                    .where("uid", isEqualTo: user.uid)
135                    .where("name", isEqualTo: widget.name)
136                    .orderBy("date")
137                    .snapshots(),
138                builder: (context, snapshot) {
139                  if (snapshot.hasData) {
140                    documents =
141                        snapshot.data.documents;
142                    return SingleChildScrollView(
143                        scrollDirection: Axis.vertical,
144                        child: FittedBox(child: recordData(documents)));
145                  }
146                  return Center(
147                    child: Text("読み込み中..."),
148                  );
149                }),
150          )
151        ],
152      ),
153    );
154  }
155}
156

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように、ドキュメントのidで比較するようにしてみてください。
※ FireStoreのバージョンが古い場合はdocumentIDという名前かもしれません。

dart
1DataRow(
2  selected: selectedRecords.any((record) => record.id == document.id),
3  onSelectChanged: ...
4  cells: ...

あと、以下の部分のrecordという変数はdocumentの間違いでは無いでしょうか?

dart
1  onSelectedRow(bool selected, DocumentSnapshot document) async {
2    setState(() {
3      if (selected) {
4        selectedRecords.add(record);
5      } else {
6        selectedRecords.remove(document);
7      }
8    });
9  }

追記(09/02/21:00): チェックが外れない問題の修正方法
配列から削除するのにremoveを使うと、DocumentSnapshotの場合、同じインスタンスかどうかで判定されてしまいます。
代わりにremoveWhereを使ってidを比較して同じものを削除するようにしてみてください。

dart
1  onSelectedRow(bool selected, DocumentSnapshot document) async {
2    setState(() {
3      if (selected) {
4        selectedRecords.add(document);
5      } else {
6        selectedRecords.removeWhere((record) => record.id == document.id);
7      }
8    });
9  }

投稿2020/09/02 01:35

編集2020/09/02 12:57

nskhei

総合スコア704

AAA_AAA

2020/09/02 11:55 編集

回答ありがとうございます。該当箇所について修正したところ、checkboxにチェック自体はつくようになりましたがチェックが外れないという問題が発生するようになりました。何か解決方法がありましたらご教授いただけると助かります。 (selectedやsellectchangedの結果自体はtrueとfalseが正しく返されていました) ※recordの部分はdocumentの間違いです。

nskhei

2020/09/02 12:08

回答に追記しました。多分これで動くと思います。

AAA_AAA

2020/09/02 13:53 編集

ありがとうございます。無事動作しました。自分が無知なもので少しお聞きしたいのですが、 checkが入る場合と入らない場合のどちらに関しても DocumentSnapshotだとインスタンスで判断すると結果がfalseと帰ってきてcheckが正常に動作しないのは何故でしょうか？お手数おかけしますが回答いただけると幸いです。

nskhei

2020/09/02 14:30

おそらくListのaddメソッドが、同じ値を持った別オブジェクトを生成して配列に格納するためです。同じ値を持っていますが、別物なので結果がfalseになってしまっていたのだと思います。

AAA_AAA

2020/09/02 14:46

ありがとうございます。理解できました。

行動規範の内容に同意します