0

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:

w/o appbar

with appbar

7
  • Can you point on picture which space you are talking about? Commented Jul 8, 2022 at 18:07
  • I am refering to the first picture and the space is between the last word of the subtitle and the first list item of the listview. The second picture shows the same code with an AppBar. As you can see there is no (less) space between them Commented Jul 8, 2022 at 18:10
  • 1
    Sorry I;ve failed to reproduce the issue with current snippet on chrome Commented Jul 8, 2022 at 18:13
  • Do you need any further code or information? Commented Jul 8, 2022 at 18:34
  • I've modified the variables, but those are just colors, do you get the same issue on running chrome? Commented Jul 8, 2022 at 18:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.