如何获得具有这种效果的 SliverAppBar？

Question

这是Grailed App中header的一个例子，左上角有一个标题，当页面向下滚动时，标题显示在顶部中间：

这是我目前拥有的：

class AccountPageHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      backgroundColor: kMainBG,
      expandedHeight: 90,
      toolbarHeight: 50,
      pinned: true,
      elevation: 0,
      automaticallyImplyLeading: false,
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: false,
        title: Text(
          "Account",
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.w800),
        ),
        titlePadding: EdgeInsets.all(kDefaultPadding),
      ),
      actions: [],
    );
  }
}

我的标题是灵活的 space 并且当在页面上向下滚动时只是过渡到左上角。

如果有人能引导我找到关于如何在 Grailed 示例中实现应用栏的正确位置，我将不胜感激！蒂亚！

Answer 1

我们可以使用CupertinoSliverNavigationBar来得到这个效果。

CupertinoSliverNavigationBar(
  largeTitle: Text("Account"),
),

如何获得具有这种效果的 SliverAppBar？

How do I get a SliverAppBar with this effect?

flutter

flutter-dependencies

flutter-layout