How to customized the SliverAppBar app bar?

问题:

I would like to add some more information in the green area, but when user scrolls up, I keep the _ SliverAppBar on the top..., like this:

Here is my current source code:

body: new CustomScrollView(slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 300.0, // TODO: check out later
            flexibleSpace: const FlexibleSpaceBar(
              title: const Text('_SliverAppBar')
            ),
          ),
          new SliverList(delegate: new SliverChildListDelegate(_galleryListItems()))
        ]),

回答1:

The FlexibleSpaceBar has a background property the accepts any Widget

Use to build the information you need:

FlexibleSpaceBar(
  title: Text('_SliverAppBar'),
  background: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Info'),
    ],
  ),
),

Here is a more complete example that adds a subtitle and hides it when the user scrolls.