Weird space between SliverAppBar and ListView in flutter

Question

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,
            );
          },
        ),
      ),
    );
  }
}

Answer 1

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,
          );
        },
      ),
    )