I have a table with data get from API, i create a Scrollable table with Fix First Row (which is the column header) table was successfull and function but it's always show this message in debug console: ════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════ Incorrect use of ParentDataWidget. ════════════════════════════════════════════════════════════════════════════════
Please help me to improve the code so the "Exception caught by widgets library...." not showing up when i access the table.
The code is like this:
// ignore_for_file: camel_case_types, prefer_interpolation_to_compose_strings
import 'package:bps_cilacap/restAPI/repository_penduduk_kecamatan.dart';
import 'package:flutter/material.dart';
import 'package:bps_cilacap/format_angka.dart';
class JumlahPendudukKecamatanA extends StatefulWidget {
const JumlahPendudukKecamatanA({Key? key}) : super(key: key);
@override
State<JumlahPendudukKecamatanA> createState() =>
_JumlahPendudukKecamatanAState();
}
RepositoryJumlahPendudukKecamatan jumlahPendudukKecamatan =
RepositoryJumlahPendudukKecamatan();
class _JumlahPendudukKecamatanAState extends State<JumlahPendudukKecamatanA> {
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height -
MediaQuery.of(context).padding.top -
MediaQuery.of(context).padding.bottom;
// ignore: unused_local_variable
final screenWidth = MediaQuery.of(context).size.width -
MediaQuery.of(context).padding.left -
MediaQuery.of(context).padding.right;
return Scaffold(
body: FutureBuilder(
future: jumlahPendudukKecamatan.getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List isipendudukkecamatan = snapshot.data as List;
return PageView.builder(
itemCount: 1,
itemBuilder: (context, index) {
String kec1 = " 1. " + isipendudukkecamatan[index = 0].kecamatan;
String kec2 = " 2. " + isipendudukkecamatan[index = 1].kecamatan;
…
……
String kec24 =24. " + isipendudukkecamatan[index = 23].kecamatan;
String kab = " " + isipendudukkecamatan[index = 24].kecamatan;
int lk1 = int.parse(isipendudukkecamatan[index = 0].lk1);
int lk2 = int.parse(isipendudukkecamatan[index = 1].lk1);
……
…..
int lk24 = int.parse(isipendudukkecamatan[index = 23].lk1);
int lkTotal = int.parse(isipendudukkecamatan[index = 24].lk1);
int pr1 = int.parse(isipendudukkecamatan[index = 0].pr1);
int pr2 = int.parse(isipendudukkecamatan[index = 1].pr1);
int pr3 = int.parse(isipendudukkecamatan[index = 2].pr1);
………
………
int pr24 = int.parse(isipendudukkecamatan[index = 23].pr1);
int prTotal = int.parse(isipendudukkecamatan[index = 24].pr1);
return Scaffold(
body: Column(
children: <Widget>[
//This is the part of Fixed Row Header
Row(
children: [
Flexible(
fit: FlexFit.tight,
flex: 4,
child: Container(
height: screenHeight * 0.06,
padding: const EdgeInsets.symmetric(
horizontal: 2, vertical: 10),
color: Colors.green,
child: const Center(
child: Text(
"Kecamatan",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Container(
height: screenHeight * 0.06,
padding: const EdgeInsets.symmetric(
horizontal: 2, vertical: 10),
color: Colors.green,
child: const Center(
child: Text(
"Lk",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Container(
height: screenHeight * 0.06,
padding: const EdgeInsets.symmetric(
horizontal: 2, vertical: 10),
color: Colors.green,
child: const Center(
child: Text(
"Pr",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Container(
height: screenHeight * 0.06,
padding: const EdgeInsets.symmetric(
horizontal: 2, vertical: 10),
color: Colors.green,
child: const Center(
child: Text(
"Lk + Pr",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
),
],
),
// This the part of Scrollable Row
Expanded(
child: SingleChildScrollView(
child: Flexible(
child: SizedBox(
width: screenWidth,
height: screenHeight,
child: Column(
children: [
//First Row
Container(
width: screenWidth * 1.0,
height: screenHeight * 0.032,
color: Colors.transparent,
child: Row(
children: [
Flexible(
fit: FlexFit.tight,
flex: 4,
child: Container(
color: Colors.transparent,
padding: const EdgeInsets.only(
right: 10, top: 1, bottom: 1),
child: Text(
kec1,
textAlign: TextAlign.left,
style: const TextStyle(
fontWeight: FontWeight.normal),
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Container(
color: Colors.transparent,
padding: const EdgeInsets.only(
right: 10, top: 1, bottom: 1),
child: Text(
Format.convertTo(lk1, 0),
textAlign: TextAlign.right,
style: const TextStyle(
fontWeight: FontWeight.normal),
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Container(
color: Colors.transparent,
padding: const EdgeInsets.only(
right: 10, top: 1, bottom: 1),
child: Text(
Format.convertTo(pr1, 0),
textAlign: TextAlign.right,
style: const TextStyle(
fontWeight: FontWeight.normal),
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Container(
color: Colors.transparent,
padding: const EdgeInsets.only(
right: 5, top: 1, bottom: 1),
child: Text(
Format.convertTo((lk1 + pr2), 0),
textAlign: TextAlign.right,
style: const TextStyle(
fontWeight: FontWeight.normal),
),
),
),
],
),
),
//Second row
……
//And more row here
…
//21 st row
),
),
),
))
],
));
},
);
}
if (snapshot.hasError) {
return const Text('Database Error');
} else {
return const Center(child: CircularProgressIndicator(strokeWidth: 3));
}
},
));
}
}
i'm hping removing this message (althoug the table function normally)
════════ Exception caught by widgets library ═══════════════════════════════════ Incorrect use of ParentDataWidget.
I solved this (working around) by using two tables instead of one, the first table will have only the headers row while the second table below will have the content rows only.
Edited with example: I would not use rows and columns for Api to get all data representation while we have Table (or custom table widgets) in Flutter, the only problem was that we can't pin the header row of the table and that is why I suggest this workaround : gif example
Column(
children: [
// Header Table
Table(
border: TableBorder.all(),
children: [
TableRow(
children: [
TableCell(child: Center(child: Text('Header 1'))),
TableCell(child: Center(child: Text('Header 2'))),
TableCell(child: Center(child: Text('Header 3'))),
],
),
],
),
// Content Table wrapped in a SingleChildScrollView
Expanded(
child: SingleChildScrollView(
child: Table(
border: TableBorder.all(),
children: List.generate(200, (index) {
return TableRow(
children: [
TableCell(child: Center(child: Text('Row $index - Col 1'))),
TableCell(child: Center(child: Text('Row $index - Col 2'))),
TableCell(child: Center(child: Text('Row $index - Col 3'))),
],
);
}),
),
),
),
],