Implementing Collapsing Toolbar in Flutter
3,476
Solution 1
SliverAppBar
Creates a material design app bar that can be placed in a NestedScrollView
. Both combinly help us in achieving parallax scrolling.
SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 240.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
"App Bar",
),
background: Image.network(
"https://images.pexels.com/photos/4148020/pexels-photo-4148020.jpeg",
fit: BoxFit.cover,
)),
),
];
},
body: Center(
child: Text("Hello World!!!"),
),
),
),
);
Solution 2
I think you should use SliverList
instead of SliverFillRemaining
.
body: SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
shrinkWrap: true,
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context),
),
SliverPadding(
padding: const EdgeInsets.all(0.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Text('Lorem ipsum dolor sit');
}, childCount: 1),
),
),
],
);
},
),
)
Author by
r4jiv007
Senior Android Developer with 8 years of experience. https://github.com/r4jiv007?tab=repositories https://in.linkedin.com/pub/rajiv-singh/22/521/49b/
Updated on December 12, 2022Comments
-
r4jiv007 over 1 year
I am trying to implement collapsing toolbar in my app using SliverApp bar, but the problem is that the SliverAppBar is overlapping my content when the SliverAppBar is collapsed, I am attaching the gif for more understanding,
the content in the green background is going under the toolbar, I want to avoid that, any leads are appreciated.
@override Widget build(BuildContext context) { // TODO: implement buildr var _tabs = {"1", "2", "3"}; return Scaffold( backgroundColor: Colors.white, body: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), child: SliverAppBar( expandedHeight: 250.0, floating: false, pinned: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, background: Container( decoration: BoxDecoration( shape: BoxShape.rectangle, image: DecorationImage( fit: BoxFit.fill, image: CachedNetworkImageProvider( newsPost.photos[0].url), ), ), )), forceElevated: innerBoxIsScrolled, )) ]; }, body: SafeArea( top: false, bottom: false, child: Builder( builder: (BuildContext context) { return CustomScrollView( slivers: <Widget>[ SliverOverlapInjector( handle: NestedScrollView.sliverOverlapAbsorberHandleFor( context), ), SliverPadding( padding: const EdgeInsets.all(8.0), sliver: SliverFillRemaining(child: _getBody()), ), ], ); }, ), )), ); }