CODEWITHSUNDEEP
flutterlistviewnestedscrollviewsliverappbar
crazecoder
crazecoder

Reputation: 228

Weird space between SliverAppBar and ListView in flutter

I wrote a NestedScrollView interface in the example of the Flutter document, but when I look at the ListView as the body, I find that there is a weird gap between the ListView and the SliverAppBar. What can I do to delete this gap

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, boxIsScrolled) {
          return [
            SliverAppBar(
              pinned: true,
              expandedHeight: 100,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: Text(
                "$index",
              ),
              color: Colors.green,
            );
          },
        ),
      ),
    );
  }
}

enter image description here

Upvotes: 1

Views: 1038

Answers (1)

Shubham Narkhede
Shubham Narkhede

Reputation: 2130

You can wrap your Listview with the MediaQuery. There is one method for remove unwanted space. You can check below code.

 MediaQuery.removePadding(
      removeTop: true,
      context: context,
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Text(
              "$index",
            ),
            color: Colors.green,
          );
        },
      ),
    )

Upvotes: 7

Related Questions