'have slivers start behind SliverAppBar
I'm looking for a way to start my slivers start behind my SliverAppBar. The standard way (not slivers) would be to use extendBody: true, and extendBodyBehindAppBar: true,in the Scaffold widget. This doesn't work with slivers because the appbar is part of the scaffold body I suppose. Here's minimum example.. I'd like the Sliverlist to start being the appbar....
import 'package:flutter/material.dart';
void main() => runApp(SilverAppBarExample());
class SilverAppBarExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
leading: IconButton(
icon: Icon(Icons.filter_1),
onPressed: () {
// Do something
}
),
floating: true,
pinned: true,
snap: true,
elevation: 50,
backgroundColor: Colors.transparent,
),
new SliverList(
delegate: new SliverChildListDelegate(_buildList(50))
),
],
),
),
);
}
List _buildList(int count) {
List<Widget> listItems = List();
for (int i = 0; i < count; i++) {
listItems.add(new Padding(padding: new EdgeInsets.all(20.0),
child: new Text(
'Item ${i.toString()}',
style: new TextStyle(fontSize: 25.0)
)
));
}
return listItems;
}
}
Solution 1:[1]
I solved it using NestedScrollView without SliverOverlapInjector So use it as normal except remove this part
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
and make sure your app bar is pinned, and not floating
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mohamed Dawood |
