Flutter - Remove Spacing Between headerBuilder and body in ExpansionPanelList - flutter

Question

I'm using ExpansionPanelList.radio widget.
How do I remove or reduce the spacing between the headerBuilder and body in each ExpansionPanelRadio widget?
The code is just a modified version of the Flutter DartPad sample code.
Each ExpansionPanelRadio widget contains a ListView builder widget.
I can't use the Stack widget as it produces size is not finite/Viewport unbounded height error.
Placing Transform.translate(offset: const Offset(0.0, -32.0), child: Text('ABCD') in the body() does the work but leaves 32 unit emply space at the bottom of each ExpansionPanelRadio widget.
I'm ok to copy specific Flutter source files in my project and modify them. But I'm not getting the clue how the space is added between the headerBuilder() and the body.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
// stores ExpansionPanel state information
class Item {
Item({
required this.id,
required this.expandedValue,
required this.headerValue,
});
int id;
String expandedValue;
String headerValue;
}
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
return Item(
id: index,
headerValue: 'Panel $index',
expandedValue: 'Panel $index: The quick brown fox jumps over the lazy dog.',
);
});
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
final List<Item> _data = generateItems(8);
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList.radio(
initialOpenPanelValue: 2,
expandedHeaderPadding: const EdgeInsets.all(0.0),
children: _data.map<ExpansionPanelRadio>((Item item) {
return ExpansionPanelRadio(
value: item.id,
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: SizedBox(
height: 20.0,
child: Text(item.expandedValue),
)
);
}).toList(),
);
}
}
Already tried solutions given in the SO link but it only removes space before/after the currently expanded ExpansionPanelRadio widget.
Is there a way to reduce the spacing between the headerBuilder and the body?
It appears taller on a real device.

Answer 1

You can use like that
Transform.translate(
offset: OffSet(0, -10), //you can change y value, like -10
child: SizedBox(
height: 20.0,
child: Text(item.expandedValue),
),
),