ExpansionPanel with headers is not correctly aligned - flutter

Question

I'm trying to build a Data Table variant so that the row can be expanded with extra information. I didn't found a way to do this with the DataTable class.
This is what I have:
class TestPanel extends StatefulWidget {
const TestPanel({Key? key}) : super(key: key);
#override
_TestPanelState createState() => _TestPanelState();
}
class _TestPanelState extends State<TestPanel> {
bool _customTileExpanded = false;
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: const <Widget>[
Expanded(
child: Text("Header 1"),
),
Expanded(
child: Text("Some Header 2"),
),
Expanded(
child: Text(""),
)
],
),
),
Expanded(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ExpansionPanelList(
animationDuration: Duration(milliseconds: 1000),
dividerColor: Colors.grey,
elevation: 1,
children: [
ExpansionPanel(
body: Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Some text here",
style: TextStyle(
color: Colors.grey[700],
fontSize: 15,
letterSpacing: 0.3,
height: 1.3),
),
],
),
),
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
padding: EdgeInsets.all(10),
child: Row(
children: const <Widget>[
Expanded(
child: Text("Value 1"),
),
Expanded(
child: Text("Some Value 2"),
),
],
),
);
},
isExpanded: _customTileExpanded,
)
],
expansionCallback: (int item, bool expanded) {
setState(() => _customTileExpanded = !expanded);
},
);
},
),
),
],
),
);
}
}
Now this results in:
As you can see the alignment with the headers is not correct. I have no idea how I can make sure that those are always aligned.

Answer 1

There's a tricky solution here by adding SizedBox with the same width of the ExpansionPanelList icon "including it's padding" at the end of the header row like following:
Row(
children: [
Expanded(
child: Row(
children: const <Widget>[
Expanded(
child: Text("Header 1"),
),
Expanded(
child: Text("Some Header 2"),
),
],
),
),
// If the Header text "Some Header 2" is longer than the Expansion Header "Some Value 2" you'll need to increase the Sizedbox width.
const SizedBox(
64, //ExpansionPanelList IconContainer size: end margin 8 + padding 16*2 + size 24
),
],
),
Also, I dont' know if this would work with your idea but you can have dynamic rows height with DataTable2 Package but first you need to copy the package code and paste it in your root directory of your current project to make some edits on it "To make the row's height dynamic":
For having Dynamic row height remove height: effectiveDataRowHeight and height: effectiveHeadingRowHeight from the new widget file.
You can add constraints: BoxConstraints(minHeight: effectiveHeadingRowHeight,) and constraints: BoxConstraints(minHeight: effectiveDataRowHeight,) instead of above and use dataRowHeight parameter as min Height and same for headingRowHeight.
To center all data in cells add defaultVerticalAlignment: TableCellVerticalAlignment.middle to var dataRows in the widget code.
Result:
Image
You can also do the same with the DataTable class but at step3, You need to add defaultVerticalAlignment: TableCellVerticalAlignment.middle to the Table child in the image: Image
I prefer using DataTable2 as it has more customization, you can find it here: DataTable2
After That, You can add Icon at the end of the row. If it's clicked you add new row with extra information.