zhongpeng
zhongpeng

Reputation: 33

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

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,
        ),
      ),
    ],
  ),
)

Upvotes: 1

Views: 2464

Answers (2)

Rares
Rares

Reputation: 151

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.

Upvotes: 9

quiscaca
quiscaca

Reputation: 46

Wrap your widget in MediaQuery.removePadding. Example:

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

Upvotes: 2

Related Questions