用户滚动时如何拉伸图像

Question

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

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

这张图片位于页面顶部，当用户向上滚动时，我想拉伸图片。它会像 SliverAppBar 中的伸展一样。我是 flutter 的新手，所以我对动画了解不多。

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

用户滚动时如何拉伸图像

How to stretch an image when user scrolls in flutter

flutter

flutter-animation