收缩 SliverAppBar 图像动画就像 Flutter 中的标题文本

Question

我正在尝试复制带有图像的 SliverAppBar 自然出现的文本收缩效果，以便 sliverhead 的背景图像缩小为 sliverAppBar 应用栏中的前导图标。

我尝试使用 AnimatedPostioned flutter 小部件以及滚动控制器，该控制器在页面滚动时切换 isSkrink 布尔值的状态。

下面是 AnimatedPosition 小部件：

AnimatedPositioned(
  width: isShrink ? 10.0 : 200.0,
  height: isShrink ? 10.0 : 200.0,
  duration: Duration(seconds: 2),
  curve: Curves.linear,
  child: Stack(
    children: [
      Container(
        child: Image.asset(
            'assets/images/user-avatar.png'),
      ),
    ],
  ),
),

下面是 SliverAppBar，堆栈中有 AnimatedPositioned，SliverAppBar 的前导参数中有用户图标

SliverAppBar(
  leading: isShrink
      ? Padding(
          padding: EdgeInsets.all(10),
          child: CircleAvatar(
            backgroundImage:
                AssetImage('assets/images/user-avatar.png'),
            backgroundColor: Colors.white,
            radius: 3,
          ),
        )
      : Container(),
  floating: true,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Row(
      children: <Widget>[
        Text(
          "Username",
          style: bodyText1Style(
            context,
            color: isShrink ? Colors.black : Colors.white,
            fontSize: isShrink ? 18 : 15,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    ),
    background: Stack(
      children: <Widget>[
        AnimatedPositioned(
          width: isShrink ? 10.0 : 200.0,
          height: isShrink ? 10.0 : 200.0,
          duration: Duration(seconds: 2),
          curve: Curves.linear,
          child: Stack(
            children: [
              Container(
                child: Image.asset(
                    'assets/images/user-avatar.png'),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  expandedHeight: size.height * 0.35,
);

这是上面代码的结果：

Answer 1

经过长时间的研究，我能够使用作为参考：

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      TransitionAppBar(
        // extent: 250,
        extent: 300,
        avatar: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                      'assets/images/user-avatar.png'), // NetworkImage(user.imageUrl),
                  fit: BoxFit.cover)),
        ),
        title: "Emmanuel Olu-Flourish",
      ),
      SliverList(
          delegate: SliverChildBuilderDelegate((context, index) {
        return Container(
            child: ListTile(
              title: Text("${index}a"),
            ));
      }, childCount: 25))

    ],
  ),
);

在此处检查 TransitionAppBar 实现： https://gist.github.com/Oluflourish/2f0789bd2e8ee576a2d6364d709c1c14

下面是结果演示：

收缩 SliverAppBar 图像动画就像 Flutter 中的标题文本

Shrink SliverAppBar Image animation Like Title Text in Flutter

animation

dart

flutter

flutter-sliver

sliverappbar