Let’s Customize AppBar In Flutter

Let’s talk about app bar widget, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into app bar widget, what they really are, their role, and usage in flutter apps. So the first thing that would come to your mind will be, what is an appbar in flutter app?

Introduction

An app bar is a widget that you can see in the top of your flutter app, of course, if you define it then you will be able to see it. Let’s jumpy right into it. You can make the app bar with a simple class and that is given below:

Implementation

AppBar()

This is the app bar class which we will be using for implementing and customizing the flutter app bar. Let’s put it in a scaffold:

Scaffold(
appBar: AppBar()
)

Now as you can see a blue container type bar with default blue background color in the top of the screen. This is the app bar that you have just implemented.

Title Text in AppBar

AppBar(

title: Text('App bar')

)

Now we are able to see a text in our app bar. If you want to learn more about text widget then click here. If you want the title to be in the center then just use this:

AppBar(
centerTitle: true
title: Text(‘App bar’)

)

Making the center title constructor true will put the text in center as you can see in this example.

Background Color of AppBar

AppBar(

backgroundColor:Colors.red

)

As you can see, the background color of the app bar is now red, which we have changed using the background color construcor of the app bar.

Leading Icon in AppBar

AppBar(

leading: Icon( Icons.arrow_back)

)

Now we have a leading icon in our app bar, which can be used to go back to previous page or any other function that is defined for it. You can use any widget in it, not just the icon widget, you can use text widget as well or any other depending on your design requirements.

Actions in AppBar

AppBar(
  actions:[
              Icon(Icons.search),  Icon(Icons.lock)
          ]
      )

Actions constructor is used to put a list of widget at the end of the app bar means on the right side of it. Actions constructor takes a list of widgets, so that means you can use multiple widgets in it as we have implemented in the above code.

Note:

That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into the app bar and other amazing widgets. Thanks.