当用户在颤动中滚动时，如何拉伸图像

Question

我想在用户滚动时拉伸图像。

Container(
child: Image.asset(
'assets/appHeader.png',
fit: BoxFit.cover,
width: size.width,
height: 170,
),
)

这个图片在页面的顶部，当用户向上滚动时，我想拉伸图片。这将像SliverAppBar中的拉伸一样。我是个新手，所以我对动画了解不多。

Answer 1

试试这个，我是用FlexibleSpaceBar创建的。

@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
//pinned: true, if you need to show appBar.
pinned: false,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Image Text(optional)",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://miro.medium.com/max/700/1*_nCC_uFDVYas8uYa9m6fQQ.jpeg",
fit: BoxFit.cover,
)
/*-------Your Image here--------*/
/* Image.asset(
'assets/appHeader.png',
fit: BoxFit.cover,
width: size.width,
height: 170,
),*/
),
),
];
},
body: Center(
child: Text("Your screen data"),
),
),
);
}

Answer 2

这个答案更新了关于(您在评论中询问的((这只适用于我们讨论的这种情况(。

@override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: [
Scaffold(
//same code that above write
)
],
),
);
}