Solved: Flutter smoothly scaling app bars title on scroll

Question

Asked by kubawich on January 07, 2022 (source).

for now I have mock of view as presented. I want this app bars title to be twice as big when I'm on the top of the screen with no buttons, and scale smoothly back to current form with two buttons when I scroll down. I tried to experiment with sliverappbar but without effect. I use here scaffold with standard app bar. Is there a convenient way to achieve it, or I have to write it myself. I'd be thankful for any advice.

EDIT: Something like showed here gif

enter image description here

Answer

Question answered by Diwyansh (source).

You can use CustomScrollView with Slivers to achieve your desired result. I'm sharing an example for this you can customize it as per your need.

 CustomScrollView(
      slivers: [
        SliverAppBar(
          pinned: true,
          expandedHeight: 120,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("Barb's Latest",style: TextStyle(fontSize: 30),),titlePadding: EdgeInsets.all(15),
          ),automaticallyImplyLeading: true,
        ),
        SliverList(
            delegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                      height: 100,
                      margin: EdgeInsets.only(bottom: 10),
                      color: Colors.red,
                    ),
                childCount: 50))
      ],
    )

Video Answers on YouTube

FLUTTER FLUTTER-LAYOUT
SHARE: