How do I get a SliverAppBar with this effect?-CodePudding

This is an example of the header in the Grailed App, there's a title in the top left, and when the page is scrolled down the title shows in the top centre:

This is what I have so far:

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: [],
    );
  }
}

My title is in the flexible space and just sort of transitions on to the top left whe scrolled down on the page.

If anyone could lead me to the right place on how to achieve the app bar on the Grailed example I would appreciate it! TYIA!

CodePudding user response：

We can get this effect using CupertinoSliverNavigationBar.

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