问题
I want to create a profile photo with a stack, below it is a silver list (for animation purposes when scroll)
How do I add the stack photo next to the silverlist, then when the discroll down the photo shrinks, if scroll back to the top, the photo enlarges as before.
see the comparison of the image below:
Widget _buildDetailFood(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
floating: false,
expandedHeight: 256,
flexibleSpace: FlexibleSpaceBar(
background: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'images/dish.jpg',
fit: BoxFit.cover,
),
// This gradient ensures that the toolbar icons are distinct
// against the background image.
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(0.0, -1.0),
end: Alignment(0.0, -0.4),
colors: <Color>[Color(0x60000000), Color(0x00000000)],
),
),
),
],
),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
color: Colors.white,
padding: const EdgeInsets.all(16),
// margin: const EdgeInsets.only(bottom: 4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 70,
height: 70,
child: CircleAvatar(
backgroundColor: Colors.blueAccent,
child: Text('T'),
),
),
SizedBox(height: 10),
Text(
"Lomo Saltado",
style: Theme.of(context)
.textTheme
.title
.copyWith(fontSize: 18.0),
),
Text(
"Papachos",
style: Theme.of(context)
.textTheme
.caption
.copyWith(fontSize: 16.0),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(FontAwesomeIcons.locationArrow, size: 12, color: Colors.grey[700]),
SizedBox(width: 10),
Text("Av. Cuba 1612, Jesus Maria", style: TextStyle(color: Colors.grey[700])),
],
),
SizedBox(height: 5),
Row(
children: <Widget>[
Icon(FontAwesomeIcons.clock, size: 12, color: Colors.grey[700]),
SizedBox(width: 10),
Text("6:00 AM - 9:00 PM", style: TextStyle(color: Colors.grey[700], fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RaisedButton(color: Colors.orange[900],
child: Text('AGREGAR FOTOS', style: TextStyle(color: Colors.white),),
onPressed: (){}),
RaisedButton.icon(
icon: Icon(FontAwesomeIcons.solidStar, color: Colors.white, size: 14),
color: Colors.orange[600],
label: Text(' VOTAR', style: TextStyle(color: Colors.white),),
// child: ,
onPressed: (){}),
],
)
],
),
),
Container(
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 4.0),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Summary",
style:
Theme.of(context).textTheme.title.copyWith(fontSize: 20),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Text("Bedroom"),
),
Padding( // Wrap(
// runSpacing: 8,
// spacing: 8,
// children: property.keyWordList
// .map((kl) => Chip(
// label: Text(kl),
// labelStyle: TextStyle(color: Colors.white),
// backgroundColor: Theme.of(context).accentColor,
// ))
// .toList(),
// ),
padding: const EdgeInsets.only(bottom: 4.0),
child: Text(
"Tags",
style: Theme.of(context).textTheme.subtitle,
),
),
],
),
),
Container(
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 4.0),
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"Lister",
style: Theme.of(context)
.textTheme
.title
.copyWith(fontSize: 20.0),
),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text("unavailable"),
subtitle: Text("Unavailable"),
),
],
),
),
]))
],
);
}
any answer is certainly very helpful, thanks
来源：https://stackoverflow.com/questions/54119622/flutter-anyone-know-how-to-create-photo-with-stack-silverlist