CODEWITHSUNDEEP
flutterdartflutter-sliverflutter-appbar
Bollie
Bollie

Reputation: 517

Collapsing title bar flutter with animation

I am trying to recreate this in Flutter -> https://blog.uptech.team/how-to-build-resizing-image-in-navigation-bar-with-large-title-8ba2e8bcb840

I.e., An app bar that resizes and aligns the title when you drag (Just the title, I don't want the Captain America shield). I have looked into Sliver App Bar as below: 

 NestedScrollView(
        controller: _scrollController,
        physics: NeverScrollableScrollPhysics(),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              automaticallyImplyLeading: false,
              backgroundColor: backgroundColor,
              expandedHeight:
                  MediaQuery.of(context).size.height * 0.25,
              floating: false,
              pinned: true,
              centerTitle: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("Testing",
                    style: TextStyle(
                      color: Colors.white,
                    )),
              ),
            ),
          ];
        },

However I am not sure where to go next from here.

Upvotes: 1

Views: 1536

Answers (1)

Adrian Murray
Adrian Murray

Reputation: 2304

I believe you are looking for the CupertinoSliverNavigationBar which is apart of the Cupertino Widget collection.

Upvotes: 1

Related Questions