如何制作动态的Appbar标题？

Question

如何在滚动时做出如此动态的Appbar？

enter image description here

Answer 1

在Scaffold内，您应该只具有主体而不是appbar并使用CustomScrollView作为主体。对于您的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.
        ]),
      ),
    ],
  ),
);