FlexibleSpace in SliverAppBar is not hiding it's contents when I scroll up
1,436
Add a FlexibleSpaceBar, then your Stack
as its background
, like this:
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: PageScrollPhysics(),
slivers: [
SliverAppBar(
title: Text('Dashboard'),
actions: [
CircleAvatar(
backgroundColor: Colors.transparent,
backgroundImage: NetworkImage(
'https://i.pinimg.com/originals/da/51/c2/da51c26fe3398b0f8314fee17a98e0e7.jpg'),
),
SizedBox(width: 10.0),
],
floating: false,
pinned: true,
expandedHeight: 300.0,
flexibleSpace: FlexibleSpaceBar(
background: Stack(
children: <Widget>[
Positioned.fill(
child: Image.network(
"https://images.wallpapersden.com/image/download/colorful-neon-bubbles_a2dtaWmUmZqaraWkpJRmbmdlrWZlbWU.jpg",
fit: BoxFit.cover,
)),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Join as our member now,\nget discount upto 70%',
style: TextStyle(color: Colors.white),
),
SizedBox(height: 8.0),
RaisedButton(
child: Text(
'Subscribe now',
style: TextStyle(color: Colors.red),
),
onPressed: () {},
)
],
),
)
],
),
)),
SliverList(
delegate: SliverChildListDelegate([
Container(
height: 500.0,
),
]),
)
],
),
);
}
}
Author by
littleironical
Here to help other developers in solving their problems and queries so that they won't face the same difficulties that I've faced in my developing phase. I hope my answers would help you.
Updated on December 18, 2022Comments
-
littleironical over 1 year
The problem:
Why did contents inside
flexibleSpace
is not hiding when I'm scrolling up?This is my code:
class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( physics: PageScrollPhysics(), slivers: [ SliverAppBar( title: Text('Dashboard'), actions: [ CircleAvatar( backgroundColor: Colors.transparent, backgroundImage: NetworkImage('https://i.pinimg.com/originals/da/51/c2/da51c26fe3398b0f8314fee17a98e0e7.jpg'), ), SizedBox(width: 10.0), ], floating: false, pinned: true, expandedHeight: 300.0, flexibleSpace: Stack( children: <Widget>[ Positioned.fill( child: Image.network( "https://images.wallpapersden.com/image/download/colorful-neon-bubbles_a2dtaWmUmZqaraWkpJRmbmdlrWZlbWU.jpg", fit: BoxFit.cover, ) ), Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('Join as our member now,\nget discount upto 70%', style: TextStyle(color: Colors.white),), SizedBox(height: 8.0), RaisedButton( child: Text('Subscribe now', style: TextStyle(color: Colors.red),), onPressed: () {}, ) ], ), ) ], ), ), SliverList( delegate: SliverChildListDelegate([ Container( height: 500.0, ), ]), ) ], ), ); } }
EDIT: I tried this, but it didn't work.
bottom: PreferredSize( preferredSize: Size.fromHeight(0), child: ...