How to remove the padding on the top part of SliverAppBar in flutter?

391 Views Asked by At

enter image description here

How to remove the padding on the top part of SliverAppBar in flutter?

I want to remove the extra padding at the top,I can't get rid of it anyway.Please help me find out how to achieve expectations.

code:

 Scaffold(
  backgroundColor: Colors.green.shade200,
  appBar: null,
  body: CustomScrollView(
    slivers: <Widget>[
      SliverToBoxAdapter(
        child: Container(
          height: 200,
          color: Colors.transparent,
          child: Center(
            child: Text("SliverToBoxAdapter"),
          ),
        ),
      ),
       SliverAppBar(
        pinned: true,
        snap: false,
        floating: false,
        backgroundColor: Colors.white,
        shape:  const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)) // <-- Radius
        ),
        leadingWidth: 100,
        title: Text("title", style: TextStyle(color: Colors.blueAccent),),
        // expandedHeight: 250.0,
        // flexibleSpace: FlexibleSpaceBar(
        //   title: Text('Demo'),
        // ),
      ),
      SliverGrid(
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 4.0,
        ),
        delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.teal[100 * (index % 9)],
              child: Text('Grid Item $index'),
            );
          },
          childCount: 100,
        ),
      ),
    ],
  ),
)
2

There are 2 best solutions below

0
quiscaca On BEST ANSWER

Wrap your widget in MediaQuery.removePadding. Example:

return MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: child,
);
1
Rares On

The right way is to set primary to false on the SliverAppBar. If the SliverAppBar thinks it's the main one it will add padding to get out of the status bar.