如何使标题淡出？

Question

我制作了类似这张 gif 的东西：

但唯一缺少的部分是 Fading Title，我不知道该怎么做。

我想我需要知道滚动的位置，这样在某个位置，如果用户一直滚动，那么Title会一直淡出直到消失。我不确定，也许还有其他方法，有什么想法吗？

这是我目前得到的：

return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: CustomScrollView(
      shrinkWrap: true,
      slivers: <Widget>[
        SliverAppBar(
          primary: false,
          automaticallyImplyLeading: false,
          elevation: 0,
          backgroundColor: Colors.white,
          expandedHeight: 300.0,
          //
          centerTitle: true,
          flexibleSpace: Center(
            child: FlexibleSpaceBar(
              centerTitle: true,
              titlePadding: EdgeInsets.fromLTRB(20, 10, 20, 135),
              collapseMode: CollapseMode.none,
              title: Text(
                'Set Up Your Profile',
                style: TextStyle(
                color: kAppPurple,
                fontFamily: 'NotoSans',
                fontSize: 25,
                fontWeight: FontWeight.w100,
                ),
              ),
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(...),
        ),
      ],
    ),
  ),
);

Answer 1

你应该检查这个 link。

Flutter: Increase the power of your AppBar & SliverAppBar

Sample 2是你想实现的，但他是用图片做的。

虽然它涵盖了您想要的内容。

此 video 向您介绍如何实现它！

Answer 2

您应该将标题放在 flexibleSpaceBar 的背景属性中，然后它会在您折叠 AppBar 时自动消失。

如何使标题淡出？

How can I make a title fade?

flutter

flutter-animation