I'm working on a desktop application project using flutter. Most of the pages contain a table to show data. my problem is, when I use the regular DataTable the app hangs for 1 to 3 seconds to render and draw all the rows of the table in one page. On the other hand, the PaginatedDataTable renders the table smoothly but a specific number of rows per page. My question is, is there any way to load all the rows smoothly in one page using the regular DataTable?
Here is the page code
I noticed that method 1 is slightly faster than method 2
import 'package:flutter/material.dart';
import 'package:ghiyar/DataModels/product_part.dart';
import 'package:ghiyar/CoreControllers/database_controller.dart';
class PartsPage extends StatefulWidget {
const PartsPage({Key? key}) : super(key: key);
@override
_PartsPageState createState() => _PartsPageState();
}
class _PartsPageState extends State<PartsPage>{
Future<List<ProductPart>>? _parts;
@override
void initState(){
super.initState();
_getTripsFromDB();
}
@override
void dispose() {
super.dispose();
}
Future _getTripsFromDB() async{
List<ProductPart> dbpps = await DatabaseController.getProductParts();
setState(() { _parts = Future.value(dbpps); });
}
////////////////// method 1 //////////////////
Widget _getPartsList(List<ProductPart>? pps){
return SizedBox(
width: double.infinity,
child: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text('Number'),
),
DataColumn(
label: Text('Number'),
),
DataColumn(
label: Text('Number'),
),
DataColumn(
label: Text('Number'),
),
],
rows: pps == null ? [] : pps.map((e) => DataRow(
cells: <DataCell>[
DataCell(Text(e.number)),
DataCell(Text(e.number)),
DataCell(Text(e.number)),
DataCell(Text(e.number)),
],
selected: true,
)).toList()
),
);
}
//////////////////// method 2 /////////////////////////
Widget _getPartsList2(List<ProductPart>? pps){
return SizedBox(
width: double.infinity,
child: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text('Number'),
),
DataColumn(
label: Text('Number'),
),
DataColumn(
label: Text('Number'),
),
DataColumn(
label: Text('Number'),
),
],
rows: List<DataRow>.generate(
pps != null ? pps.length : 0,
(index) => DataRow(
color: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
// All rows will have the same selected color.
if (states.contains(MaterialState.selected)) {
return Theme.of(context).colorScheme.primary.withOpacity(0.08);
}
// Even rows will have a grey color.
if (index.isEven) {
return Colors.grey.withOpacity(0.3);
}
return null; // Use default value for other states and odd rows.
}),
cells: <DataCell>[
DataCell(Text(pps![index].number)),
DataCell(Text(pps![index].number)),
DataCell(Text(pps![index].number)),
DataCell(Text(pps![index].number)),
],
selected: true,
onSelectChanged: (bool? value) {
setState(() {
//selected[index] = value!;
});
},
)
),
),
);
}
@override
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 10.00, horizontal: 10.00),
child: SingleChildScrollView(
child: Center(
child: Text('control'),
),
),
),
Expanded(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.00, horizontal: 0.00),
child: FutureBuilder<List<ProductPart>>(
future: _parts,
builder: (context, snapshot){
if (snapshot.hasError) {
return const Center(
child: Text('Unexpected error has occurred! Please refresh the page'),
);
} else if (snapshot.hasData) {
return _getPartsList(snapshot.data);
} else {
return const Center(
child: Center(child: CircularProgressIndicator(color: Color(0xff87c94d), strokeWidth: 10),)
);
}
},
),
),
)
)
],
),
);
}
}