I have a ExpansionTile with a leading and a title with a children. i have a very long list as children so it is certain that it will not fit in screen, so it will be scrollable.
When the tile expands, and I want to scroll down through my children, the title disappears as it is a part of the scroll.
I want to make the title stick to the top. How can I do that?
My code:
class ExampleExpansionTile extends StatelessWidget {
const ExampleExpansionTile({super.key});
@override
Widget build(BuildContext context) {
const fontSize = 16;
return SafeArea(
child: SingleChildScrollView(
child: ExpansionTile(
initiallyExpanded: false,
leading: SizedBox.square(
dimension: fontSize * 2.5,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
CircularProgressIndicator(
value: 3,
backgroundColor:
Theme.of(context).colorScheme.onSurface.withOpacity(0.2),
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'70',
),
Text(
'%',
),
],
),
],
),
),
title: const Text(
"My Title",
overflow: TextOverflow.fade,
),
expandedCrossAxisAlignment: CrossAxisAlignment.stretch,
children: List.generate(100, (index) => Text('Item $index')),
),
),
);
}
}