Flutter: Animated AppBar! Part — 3

Link to Part — 1
Link to Part — 2
We begin with where we left last time.

Code for this AppBarDelegate:

import 'package:flutter/material.dart';

class AppBarDelegate extends SliverPersistentHeaderDelegate {
  @override
  double get maxExtent => 100;

  @override
  double get minExtent => 50;

  double getShrinkRatio(shrinkOffset) =>
      getCurrentHeight(shrinkOffset) / maxExtent;

  double getCurrentHeight(shrinkOffset) => maxExtent - shrinkOffset;

  double getAppBarHeight(double shrinkOffset) {
    final currentHeight = getCurrentHeight(shrinkOffset);
    return currentHeight > minExtent ? currentHeight : minExtent;
  }
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Material(
      color: Colors.blue,
      elevation: 8,
      child: SizedBox(
        height: getAppBarHeight(shrinkOffset),
        child: Stack(
          children: [
            Positioned(
              top: minExtent,
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                margin: const EdgeInsets.all(6),
                height: maxExtent - minExtent,
                alignment: Alignment.center,
                color: Colors.white,
                child: const Text('Search here...'),
              ),
            ),
            Container(
              height: minExtent,
              //TODO: we have plans for this
            ),
            Positioned(
              top: minExtent * getShrinkRatio(shrinkOffset),
              bottom: 0,
              right: 0,
              child: Container(
                height: maxExtent - minExtent,
                padding: const EdgeInsets.only(right: 12),
                child: const Icon(
                  Icons.search,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

Our Goal:

We’re very close to our goal now, we start this part by adding a Title for our AppBar that changes size as the AppBar changes its size. We add a Container to the end of the stack so it comes on top of other widgets.

Container(
  height: minExtent,
  alignment: Alignment.centerLeft,
  padding: const EdgeInsets.only(left: 12),
  child: Text(
    'Animated AppBar',
    style: TextStyle(
      color: Colors.white,
      fontSize: 18 + (getShrinkRatio(shrinkOffset) * 4),
    ),
  ),
),

As you might recall, the value of shrinkRatio ranges from 0 to 1, so the value of shrinkRatio*4 ranges from 0 to 4 we add this to 18, so the font size will range from 18 to 22.

Now we will change the color of the search icon as it goes up so that it would match the AppBar title color. For this, we will use the lerp function, which is used to linearly interpolate between two colors. More on lerp function here.

Icon(
  Icons.search,
  color: Color.lerp(
    Colors.white,
    Colors.black,
    getShrinkRatio(shrinkOffset),
  ),
),

Now as the value of shrinkRatio changes from 0 to 1 this function will map the value of color from white to black.

All that’s left is to add the Save button and move to the left as the AppBar collapses.

//TODO: we have plans for this

Remember this TODO comment we added in Part — 2 ? It’s finally being used! But first, we need to calculate the padding(right) for the save icon.

double getSaveIconRightPadding(shrinkOffset) {
  return 44 - (36 * getShrinkRatio(shrinkOffset));
}

What? didn’t get that? Let me explain…

So, we want the padding to increase as the AppBar collapses, for that we need a minimum and maximum padding, we arrived on 8 and 44, by taking into consideration that the size of the search icon is 24 and its padding is 12 on the right and 8 on the left side, making a total of 44.

As the value of shrinkRatio changes from 0 to 1, the value of 36*shrinkRatio will change from 0 to 36 we subtract this from 44 so that the padding ranges from 8 to 44.

Here we go! our job is almost done, now we can add the icon widget for the save button.

Container(
  height: minExtent,
  alignment: Alignment.centerRight,
  padding: EdgeInsets.only(
    right: getSaveIconRightPadding(shrinkOffset),
  ),
  child: const Icon(
    Icons.save,
    color: Colors.white,
  ),
// TODO comment was here
),

And here we go!

Don’t forget to show your support with some claps and follow my Account :)

Thanks!

Coming soon: Link to the git repo!