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: ...
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,
),
]),
)
],
),
);
}
}