I am using a SliverAppBar with an ExpansionTile as the body. Expanding the ExpansionTile the app displays a ListView.builder. Using the SliverAppBar it somehow adds some space between the subtitle and the children of the ExpansionTile. Adding an AppBar to the Scaffold solves the problem. Does anyone knows how to get rid of the space without using an AppBar?
Here is my code:
class Test {
final String name;
Test(this.name);
}
class SliverAppbarTest extends StatefulWidget {
const SliverAppbarTest({Key? key}) : super(key: key);
@override
State<SliverAppbarTest> createState() => _SliverAppbarTestState();
}
class _SliverAppbarTestState extends State<SliverAppbarTest> {
List<Test> test = <Test>[
Test('test 1'),
Test('test 2'),
Test('test 3'),
];
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: backGround,
body: CustomScrollView(slivers: [
SliverAppBar(
expandedHeight: screenWidth / 4.69,
backgroundColor: appbarColor,
floating: true,
pinned: true,
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40))),
flexibleSpace: FlexibleSpaceBar(
background: Container(
margin: const EdgeInsets.all(25.0),
child: Image.asset('assets/images/sliverappbartest.png'))),
),
SliverToBoxAdapter(
child: Column(children: [
const SizedBox(
height: 20,
),
ExpansionTile(
collapsedTextColor: titleColor,
collapsedIconColor: titleColor,
title: const Text('Test'),
subtitle: const Text(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren',
style: TextStyle(color: Colors.white),
),
children: [TestList(test: test)],
)
]),
)
]));
}
}
class TestList extends StatefulWidget {
final List<Test> test;
const TestList({Key? key, required this.test}) : super(key: key);
@override
State<TestList> createState() => _TestListState();
}
class _TestListState extends State<TestList> {
@override
Widget build(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
itemCount: widget.test.length,
itemBuilder: (context, index) {
var test = widget.test[index];
var name = test.name;
return ListTile(
title: Text(
name,
style: const TextStyle(color: titleColor),
),
);
},
);
}
}
And here some screenshots:

