flutter - 如何制作动态 Appbar 标题？

Question

如何Appbar在滚动时产生这样的动态？

在此处输入图像描述

标签： flutterdart

Answer 1

在 Scaffold 内部，您应该只使用 body 而不是 appbar，并使用 CustomScrollView 作为 body。对于您的 CustomScrollView，您应该使用需要小部件列表（SliverAppBar 和 SliverList）的 Sliver。SliverList 是您的可滚动内容，SliverAppBar 是您想要的 Appbar。

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 300,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('the title of appbar'),
          background: Image.network(
              an image url,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate([
          your scorrable content. make sure your content is scrollable.
        ]),
      ),
    ],
  ),
);