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
*** NotificationListener ***
NotificationListerner
is a widget that listens to the notification and it will start bubbling that notification at the givenbuildContext
.- 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 thecallBacks
.
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 aBuilder
. The builder builds the animated widget and Animation creates the animation effects. - We must initialize the
AnimationController
inside theinitState
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!.