Flutter 在滚动时平滑缩放应用栏标题答案

【问题标题】：Flutter smoothly scaling app bars title on scrollFlutter 在滚动时平滑缩放应用栏标题
【发布时间】：2022-01-07 23:51:37
【问题描述】：

现在我已经模拟了所呈现的视图。当我在没有按钮的屏幕顶部时，我希望此应用程序栏的标题大一倍，并在我向下滚动时使用两个按钮平滑地缩放回当前形式。我尝试使用 sliverappbar 但没有效果。我在这里使用带有标准应用栏的脚手架。有没有方便的方法来实现，还是我自己写。如有任何建议，我将不胜感激。

编辑：这里显示的东西gif

【问题讨论】：

你能分享一个 gif 吗？
@Diwyansh 我添加了一个 gif
好的，基本上你必须使用 SliverAppBar 来制作这个动画。你可以试试，我也会给你分享一个参考代码。
谢谢，我会再试一次，虽然我已经用过条子了
好的，那我就分享一下，给我一些时间

标签： flutter flutter-layout

【解决方案1】：

您可以将 CustomScrollView 与 Slivers 一起使用，以达到您想要的效果。我为此分享了一个example，您可以根据需要customize。

 CustomScrollView(
      slivers: [
        SliverAppBar(
          pinned: true,
          expandedHeight: 120,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("Barb's Latest",style: TextStyle(fontSize: 30),),titlePadding: EdgeInsets.all(15),
          ),automaticallyImplyLeading: true,
        ),
        SliverList(
            delegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                      height: 100,
                      margin: EdgeInsets.only(bottom: 10),
                      color: Colors.red,
                    ),
                childCount: 50))
      ],
    )

【讨论】：