Reputation: 33
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
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
Reputation: 46
Wrap your widget in MediaQuery.removePadding. Example:
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: child,
);
Upvotes: 2