Custom AppBar in Flutter

Flutter is an amazing UI tool kit used to make beautiful apps using a single codebase for android and ios. Using flutter we can build highly Animated widgets with ease. Flutter allows us to deliver Interactive applications that allow the developer to grab User Retention.

In this, we shall learn about how to build an animated AppBar. Building this AppBar will help you to learn and explore new widgets.

---

What we will build?

Build Up an Animated Appbar that will change its color on scrolling in any direction. Particularly, App bar items: drawer icon, action widget, and title text will change color to white in scroll direction downward and blue in upward scroll to its original formal color.

Demo of Module :

---

Table of content

:: Notification Listener

::AnimatedBulder

::Animation

:: Create the Custom AppBar

---

                     *** NotificationListener ***                         

• NotificationListerner is a widget that listens to the notification and it will start bubbling that notification at the given buildContext.
• This notification will be delivered to all the ancestors widgets that need to be changed on any effect or event eg. Scrolling of the given BuildContext.
• It takes a onNotification property, it is a function that handles the callBacks.

Initializing NotificationListener

scrollListener

It a bool function that returns a bool value. Here if the ScrollNotication axis is vertical then only scroll will be true.

---

AnimatedBuilder

• AnimatedBuilder is a widget that is used to create animated widgets eg. rotating Image, changing colors of widgets, etc…
• It takes Animation and a Builder. The builder builds the animated widget and Animation creates the animation effects.
• We must initialize the AnimationController inside the initState of the stateful widget.

You can read out the offical example of AnimatedBuilder for better understanding :

AnimatedBuilder class
A general-purpose widget for building animations. AnimatedBuilder is useful for more complex widgets that wish to…api.flutter.dev

---

       *** Animation ***

Introduction to Animation in Flutter
Let’s learn how to animate flutter widgets…medium.com

Creating the AppBar :

Initializing Animation and AnimationController

As you can see in the AppBar there are five widgets that are changing their colors while AppBar animation i.e. AppBar, Drawer Icon, Action Icon, Hello Text, UserName Text. So for these widgets, we will need 5 Animation :

Animation _colorTween, _homeTween, _workOutTween, _iconTween, _drawerTween;

This Animation objects will control the change of the colors of the above widgets. Also, we will be needing the AnimationController :

AnimationController _ColorAnimationController;
AnimationController _TextAnimationController;

To Learn Up Animation Basics like tween go through the Blog Introduction to Animation in Flutter.

We have to initialize the AnimationController, ColorTween inside the initState method.

@override
void initState() {
  _ColorAnimationController =
      AnimationController(vsync: this, duration: Duration(seconds: 0));
  _colorTween = ColorTween(begin: Colors.transparent, end: Colors.white)
      .animate(_ColorAnimationController);
  _iconTween =
      ColorTween(begin: Colors.white, end: Colors.lightBlue.withOpacity(0.5))
          .animate(_ColorAnimationController);
  _drawerTween = ColorTween(begin: Colors.white, end: Colors.black)
      .animate(_ColorAnimationController);
  _homeTween = ColorTween(begin: Colors.white, end: Colors.blue)
      .animate(_ColorAnimationController);
  _workOutTween = ColorTween(begin: Colors.white, end: Colors.black)
      .animate(_ColorAnimationController);
  _TextAnimationController =
      AnimationController(vsync: this, duration: Duration(seconds: 0));

  super.initState();
}

This code is about initializing all the objects that we have created earlier. You can also add the animations effects curves.

TIP:: You should always initialize the AnimationController, ColorTween, Tween inside the initState method……..💡💡

CustomAppBar using the AnimaionBuilder .

You might be aware of how to code an AppBar in Flutter. But this approach is different, as we will use AnimationBuilder and Stack widget to make this type of custom AppBar. Here AnimaionBuilder will return an AppBar that we will use in the Stack inside the main Scaffold .

I have made a separate widget for AppBar to keep our code clear and easy to understand and manage.

https://gist.github.com/anmolseth06/8a3b32424a7572ad3764301b9bb533be#file-customappbar-dart

Here I have used a Container height 80, and the child of that Container is a AnimationBuilder that builds the AppBar. Also, we will change the icon of the Drawer because if we use the default Drawer then neither you can change the color of the icon nor the icon of the Drawer. To open that Drawer on taping that icon can be achieved through GlobalKey . Also, I have used Function onPressed to pass the function that will open the Drawer.

NOTE : GlobalKey must be initialized inside the main file where you will use this Custom AppBar…📝

Creating a GlobalKey object

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

This is how you will initialize the AnimatedAppBar widget.

AnimatedAppBar(
  drawerTween: _drawerTween,
  onPressed: () {
    scaffoldKey.currentState.openDrawer();
  },
  colorAnimationController: _ColorAnimationController,
  colorTween: _colorTween,
  homeTween: _homeTween,
  iconTween: _iconTween,
  workOutTween: _workOutTween,
)

NOTE : Don’t forget to add this line inside the main Scaffold ::drawer: Drawer(), 📝

https://gist.github.com/anmolseth06/c099384aac15b640cd1560a8a68ec463#file-landingpage-dart

Now you are ready to go to implement animation into your apps. Thanks…

VIDEO REFERENCES :

---

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

---

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

---

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.