maxim-saplin
Populate datatable from Firestore
I'm able to achieve this but header ( the first column ) is not visible ! any idea ?
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(
height: 100,
child: DataTable2(
columnSpacing: 0,
horizontalMargin: 12,
bottomMargin: 10,
minWidth: 50,
columns: const <DataColumn>[
DataColumn(
label: Text('name'),
),
DataColumn(label: Text('age'), numeric: true),
DataColumn(label: Text('score'), numeric: true),
],
rows: []),
),
Expanded(
child: FirestoreQueryBuilder<Map<String, dynamic>>(
pageSize: 10,
query: FirebaseFirestore.instance.collection('users'),
builder: (context, snapshot, _) {
return ListView.builder(
itemCount: snapshot.docs.length,
itemBuilder: (context, index) {
if (snapshot.hasMore && index + 1 == snapshot.docs.length) {
snapshot.fetchMore();
}
final user = snapshot.docs[index].data();
return SizedBox(
height: 100,
child: DataTable2(
headingRowHeight: 0,
columnSpacing: 0,
horizontalMargin: 12,
bottomMargin: 10,
minWidth: 50,
columns: const <DataColumn>[
DataColumn(
label: Text(''),
),
DataColumn(label: Text(''), numeric: true),
DataColumn(label: Text(''), numeric: true),
],
rows: [
DataRow(
cells: [
DataCell(
Text(user['name']),
),
DataCell(
Text(user['age'].toString()),
),
DataCell(
Text(user['score'].toString()),
),
],
),
],
),
);
},
);
},
),
),
],
),
);
}
@AlexMunth this is what I did to make it work https://github.com/maxim-saplin/data_table_2/issues/120#issuecomment-1190724345
i used this code:
Flexible( child: DataTable2( columnSpacing: defaultPadding, dividerThickness: 1, horizontalMargin: 36, minWidth: 1200, sortAscending: false, sortArrowIcon: Icons.arrow_upward, showBottomBorder: true, headingRowColor: MaterialStateProperty.all(light), // dataRowColor: MaterialStateProperty.all(headingcolor), // headingRowColor: MaterialStateProperty.all( // Color.fromARGB(255, 228, 235, 143)), border: const TableBorder( bottom: BorderSide( color: Colors.black, width: .4, style: BorderStyle.solid, ), ), // headingTextStyle: // TextStyle(fontWeight: FontWeight.bold), sortColumnIndex: 0, columns: const [ DataColumn( tooltip: 'Name', label: Text('Name'), ), // DataColumn(label: Text('Profile')), DataColumn( tooltip: 'Email', label: Text('Email'), ), DataColumn( tooltip: 'Mobile', label: Text('Mobile'), ), DataColumn( tooltip: 'Status', label: Text('Status'), // numeric: true, ), DataColumn( tooltip: 'Action', label: Text('Action'), // numeric: true, ), DataColumn( tooltip: 'More', label: Text('More'), // numeric: true, ), ], rows: [ for (var i = 0; i < con.verifiedUserList.length; i++) getTableRow(con.verifiedUserList[i], i) ], ), ), ), const SizedBox( height: 70, ), ], ), ), ), ); }
DataRow getTableRow(data, index) { return DataRow( cells: [ DataCell( Row( children: [ // ImageNetwork( // image: data['photo_url'].toString(), // height: 30, // width: 30, // // duration: 1000, // curve: Curves.bounceOut, // onPointer: true, // fitAndroidIos: BoxFit.contain, // fitWeb: BoxFitWeb.contain, // borderRadius: BorderRadius.circular(50), // onError: const Icon( // Icons.error, // color: Color.fromARGB(255, 238, 153, 147), // ), // ), Text(data['display_name']), ], ), onTap: () => Get.to( () => ProfileViewScreenDoctor( index: index, doctoremail: data['email'], ), transition: Transition.cupertino, duration: Duration(seconds: 3), ), ),
DataCell(
Text(
data['email'].toString(),
),
onTap: () => Get.to(
() => ProfileViewScreenDoctor(
index: index,
doctoremail: data['email'],
),
transition: Transition.cupertino,
duration: Duration(seconds: 3),
),
// onTap: () => Get.to(() => VerifiedUsersEditScreen(index: index)),
),
DataCell(
Text(data['phone_number'].toString()),
onTap: () => Get.to(
() => ProfileViewScreenDoctor(
index: index,
doctoremail: data['email'],
),
transition: Transition.cupertino,
duration: Duration(seconds: 3),
),
),
DataCell(
onTap: () {},
Chip(
visualDensity: VisualDensity.compact,
elevation: 5,
// visualDensity: VisualDensity.adaptivePlatformDensity,
avatar: data['isVerify'].toString() == 'true'
? const CircleAvatar(
backgroundColor: Colors.green,
child: Icon(Icons.verified_user),
)
: const CircleAvatar(
backgroundColor: Colors.red,
child: Icon(Icons.dangerous_rounded),
),
label: data['isVerify'].toString() == 'true'
? const Text(
'Verified',
style: TextStyle(
color: Colors.white,
),
)
: const Text(
'Not-Verified',
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: data['isVerify'].toString() == 'true'
? Colors.green
: Colors.red,
),
),
// DataCell(
// Chip(
// labelStyle: TextStyle(fontSize: 12),
// label: data['isVerify']
// ? Text("Verified")
// : Text(
// 'Pending',
// ),
// backgroundColor: Colors.green,
// ),
// onTap: () => Get.to(() => VerifiedUsersEditScreen(
// index: index,
// )),
// ),
DataCell(
Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {
Get.to(
() => ProfileViewScreenDoctor(
index: index,
doctoremail: data['email'],
),
transition: Transition.cupertino,
duration: Duration(seconds: 3));
},
child: const Text('View')),
Flexible(
child: TextButton(
onPressed: () {
Get.to(
() => VerifiedUsersEditScreen(
index: index,
),
transition: Transition.cupertino,
duration: Duration(seconds: 3));
},
child: const Text('Edit')),
)
// IconButton(
// tooltip: 'See Family Members',
// onPressed: () {
// Get.to(() => FamilyMemberScreen(
// // index: index,
// ));
// },
// icon: Icon(
// Icons.family_restroom_rounded,
// size: 23.0,
// // color: Colors.red[500],
// semanticLabel: 'Add a Family Member',
// )),
],
),
// onTap: () => Get.to(() => VerifiedUsersEditScreen(
// index: index,
// )),
),
//!User Ban Logic/Code
DataCell(
Row(
mainAxisSize: MainAxisSize.min,
children: [
data['isbanned']
? Chip(
label: Text('Suspended'),
backgroundColor: Colors.red,
)
: Container(height: 0),
PopupMenuButton(
iconSize: 24.0,
icon: Icon(Icons.more_vert_rounded),
itemBuilder: (ctx) {
return [
PopupMenuItem(
child: con.verifiedUserList[index]['isbanned']
? Text(
'Un-Suspend',
style: TextStyle(color: Colors.green),
)
: Text(
'Suspend',
style: TextStyle(color: Colors.red),
),
onTap: () {
try {
if (con.verifiedUserList[index]['isbanned']) {
print('ALREADY EXIST ');
con.verifiedUserList[index]['isbanned'] = false;
Get.snackbar(
barBlur: 2,
borderRadius: 50,
colorText: Colors.white,
shouldIconPulse: true,
snackStyle: SnackStyle.FLOATING,
maxWidth: 400,
duration: const Duration(seconds: 2),
backgroundColor: drawerColor,
titleText: Text(
'Un-Suspended',
style: TextStyle(color: Colors.green),
),
icon: Icon(
Icons.done,
color: Colors.green,
),
'',
(data['display_name'] + ' is now Un-Suspended')
.toString(),
snackPosition: SnackPosition.TOP,
);
} else {
con.verifiedUserList[index]['isbanned'] = true;
Get.snackbar(
barBlur: 2,
borderRadius: 50,
colorText: Colors.white,
shouldIconPulse: true,
snackStyle: SnackStyle.FLOATING,
maxWidth: 400,
duration: const Duration(seconds: 2),
backgroundColor: drawerColor,
titleText: Text(
'Suspended',
style: TextStyle(color: Colors.red),
),
icon: Icon(
Icons.done,
color: Colors.red,
),
'',
(data['display_name'] + ' is now Suspended')
.toString(),
snackPosition: SnackPosition.TOP,
);
} // if null
FirebaseFirestore.instance
.collection('Users')
.doc(con.verifiedUserListOfDocId[index])
.update(con.verifiedUserList[index]);
con.verifiedUserList.refresh();
} catch (e) {
print(e);
}
},
),
];
},
),
],
),
),
],
);
} }
