Not Showing Data from Api In DataTable - flutter

Question

hi i have json like this:
"data": {
"list_item": [
{
"item": "1",
"item_date": "1669189813143566825",
"item_id": "0",
"item_info": {},"
"item_status":"on",
}]}
this class with sample table worked for me!but my table in app used paginated table and not worked in.
class TableSamleNew extends StatefulWidget {
const TableSamleNew({Key? key}) : super(key: key);
#override
State<TableSamleNew> createState() => _TableSamleNewState();
}
class _TableSamleNewState extends State<TableSamleNew> {
final getListController = Get.put(GetListController());
late List<ListItem>? listItem=getListController.getListClient!.data!.listItem;
#override
Widget build(BuildContext context) {
return Scaffold(
body: GetBuilder<GetListController>(
builder: (_) => getListController.isLoading
? const Padding(
padding: EdgeInsets.only(top:50),
child: Center(child: CircularProgressIndicator()),
): DataTable(columns: [
DataColumn(label: Text("1")),
DataColumn(label: Text("1")),
DataColumn(label: Text("1")),
DataColumn(label: Text("1")),
DataColumn(label: Text("1"))
],rows: listItem!.map<DataRow>((e) => DataRow(cells: [
DataCell(Text(e.itemInfo!.clientMobile.toString())),
DataCell(Text(e.itemId.toString())),
DataCell(Text(e.itemId.toString())),
DataCell(Text("")),
DataCell(Text("")),
])).toList()),
),
);
}
}
this is my main table and not showing data..
table with paginated and sort data and search with one field in table but output showing me null
class DataTableWithSortTest extends StatefulWidget {
const DataTableWithSortTest({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<DataTableWithSortTest> createState() => _DataTableWithSortTestState();
}
class _DataTableWithSortTestState extends State<DataTableWithSortTest> {
final getListController = Get.put(GetListController());
late List<ListItem>? listItem=getListController.getListClient!.data!.listItem;
bool sort = true;
onsortColum(int columnIndex, bool ascending) {
if (columnIndex == 0) {
if (ascending) {
listItem!.sort((a, b) => a.itemStatus!.compareTo(b.itemStatus!));
} else {
listItem!.sort((a, b) => b.itemStatus!.compareTo(a.itemStatus!));
}
}
}
#override
void initState() {
listItem = listItem!.cast<ListItem>();
super.initState();
}
TextEditingController controller = TextEditingController();
#override
Widget build(BuildContext context) {
print(listItem);
return Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: double.infinity,
child: Theme(
data: ThemeData.light()
.copyWith(cardColor: Theme.of(context).canvasColor),
child: PaginatedDataTable(
sortColumnIndex: 0,
sortAscending: sort,
header: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.circular(12)),
child: TextField(
controller: controller,
decoration: const InputDecoration(
hintText: "search with name"),
onChanged: (value) {
setState(() {
listItem = listItem!
.where((element) =>
element.itemStatus!.contains(value))
.toList();
});
},
),
),
source: RowSource(
listItem: listItem,
count: listItem?.length,
),
rowsPerPage: 5,
columnSpacing: 5,
columns: [
DataColumn(
label: const Text(
"1",
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 14),
),
onSort: (columnIndex, ascending) {
setState(() {
sort = !sort;
});
// onsortColum(columnIndex, ascending);
}),
const DataColumn(//
label: Text(
"2",
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 14),
),
),
const DataColumn(
label: Text(
"3",
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 14),
),
),
const DataColumn(
label: Text(
"4",
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 14),
),
),
const DataColumn(
label: Text(
"5",
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 14),
),
),
],
),
)),
const SizedBox(height: 20),
],
),
),
)),
);
}
}
class RowSource extends DataTableSource {
var listItem;
final count;
RowSource({
required this.listItem,
required this.count,
});
#override
DataRow? getRow(int index) {
if (index < rowCount) {
return recentFileDataRow(listItem![index]);
} else
return null;
}
#override
bool get isRowCountApproximate => false;
#override
int get rowCount => count;
#override
int get selectedRowCount => 0;
}
DataRow recentFileDataRow(var listItem) {
return const DataRow(
cells: [
DataCell(Text("")),
DataCell(Text("")),
DataCell(Text("")),
DataCell(Text("")),
DataCell(Text("")),
],
);
}

Answer 1

You need to define these variable out of build methode:
late List<ListItem>? listItem =getListController.getListClient!.data!.listItem;
every time the widget rebuild you variable redefine and became empty.

Answer 2

class TableSamleNew extends StatefulWidget {
const TableSamleNew({Key? key}) : super(key: key);
#override
State<TableSamleNew> createState() => _TableSamleNewState();
}
class _TableSamleNewState extends State<TableSamleNew> {
final getListController = Get.put(GetListController());
ValueNotifier<List<ListItem>> listItemNotifier = ValueNotifier([]);
#override
Widget build(BuildContext context) {
listItemNotifier.value=getListController.getListClient!.data!.listItem;
return Scaffold(
body: ValueListenableBuilder(
valueListenable: listItemNotifier,
builder:(context,List<ListItem> items, child) =>
DataTable(columns: [
DataColumn(label: Text("1")),
DataColumn(label: Text("1")),
DataColumn(label: Text("1")),
DataColumn(label: Text("1")),
DataColumn(label: Text("1"))
],rows: items.map<DataRow>((e) => DataRow(cells: [
DataCell(Text(e.itemId.toString())),
DataCell(Text(e.itemId.toString())),
DataCell(Text(e.itemId.toString())),
DataCell(Text(e.itemId.toString())),
DataCell(Text(e.itemId.toString())),
])).toList()),
);
);
}
}
try to use ValueNotifier