FLUTTERDEVS

Custom AppBar in Flutter

Building Up Custom Animated Appbar Enhancing UI of your Flutter Apps

Custom AppBar In Fluter

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 :

AppBar Demo Module *gif*

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.

Initalizing NotificationListener

scrollListener

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