I am trying to achieve on making a Datatable
in flutter with the use of Mysql as my database, it is functioning properly but it also loops the datatable with the item count, for example this image down below. I've been trying using map all the data are there inside the datatable but it loops the same data.
Image:
My Code:
FutureBuilder(
future: fetchClients(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Container(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 3,
shrinkWrap: true,
itemBuilder: (BuildContext context, index) {
Contacts contacts = snapshot.data[index];
return Card(
child: Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
topRight: Radius.circular(5.0),
),
color: Color(0xfff6f8fa),
border: Border.all(
color: Color(0xffd5d8dc),
width: 1,
)),
padding: EdgeInsets.only(
top: 13.0, left: 13.0, bottom: 13.0),
child: Row(
children: [
Icon(
FontAwesomeIcons.addressBook,
color: backgroundColor,
size: 15,
),
Text(
' Clients Overviews',
style: TextStyle(
fontWeight: FontWeight.w700),
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
DataTable(
sortColumnIndex: 1,
sortAscending: true,
columns: [
DataColumn(
label: Text('Name'),
numeric: false,
tooltip: 'Name',
),
DataColumn(
label: Text('Address'),
numeric: false,
tooltip: 'Address',
),
DataColumn(
label: Text('Number'),
numeric: false,
tooltip: 'Number',
),
],
rows: [
DataRow(
cells: [
DataCell(
Text('${contacts.name}'),
),
DataCell(
Text('${contacts.address}'),
),
DataCell(
Text('${contacts.mobile}'),
),
].toList(),
),
],
),
],
),
),
],
),
);
},
),
);
}
return CircularProgressIndicator();
},
),
Thank you and I really appreciate it! :)
If you want to display more than one line in the same card, and at the same time you want the card as an element of the list, then take a look at this code:
ListView(
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
MyCustomCard(),
//add same card or another cards
],
),
You can create your own widget for easy work, In our example, Which is MyCustomCard
, Like this:
class MyCustomCard extends StatefulWidget {
@override
_MyCustomCardState createState() => _MyCustomCardState();
}
class _MyCustomCardState extends State<MyCustomCard> {
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: fetchClients(),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
List<Contacts> contacts = snapshot.data;
return Card(
child: Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
topRight: Radius.circular(5.0),
),
color: Color(0xfff6f8fa),
border: Border.all(
color: Color(0xffd5d8dc),
width: 1,
)),
padding: EdgeInsets.only(
top: 13.0, left: 13.0, bottom: 13.0),
child: Row(
children: [
Icon(
FontAwesomeIcons.addressBook,
color: backgroundColor,
size: 15,
),
Text(
' Clients Overviews',
style: TextStyle(fontWeight: FontWeight.w700),
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DataTable(
sortColumnIndex: 1,
sortAscending: true,
columns: [
DataColumn(
label: Text('Name'),
numeric: false,
tooltip: 'Name',
),
DataColumn(
label: Text('Address'),
numeric: false,
tooltip: 'Address',
),
DataColumn(
label: Text('Number'),
numeric: false,
tooltip: 'Number',
),
],
rows: [
for (var item in contacts)
DataRow(
cells: [
DataCell(
Text('${item.name}'),
),
DataCell(
Text('${item.address}'),
),
DataCell(
Text('${item.number}'),
),
].toList(),
),
],
),
],
),
),
],
),
);
}
else return CircularProgressIndicator();
},);
}
}
Here is a picture of the result on my device
Yes I know that but I don't want all of my data to be in the flutter I want three only. That's why i put 3, And even if I put snapshot.data.length. It duplicates my datatable I want it to duplicate the datarow. But Anyways Thank you for your help!!!
You deserved the bounty
can you help me get 2 items from the database, because it gets all
For sort, have a look here: medium.com/@aervadiyayash510/datatable-in-flutter-916ef8081651
As for only getting two items, I have not used mysql before sorry, maybe there is a way