How to make the title of ExpansionTile sticky

Viewed 26

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')),
        ),
      ),
    );
  }
}
0 Answers
Related