Let’s Customize AppBar In Flutter

Let’s talk about the 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 the 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 the Flutter app?

Introduction

An app bar is a widget that you can see at 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 that 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 a default blue background color at the top of the screen. This is the app bar that you have just implemented.

Title Text in Flutter 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 widgets 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 the 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 constructor 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 the 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 the text widget as well or any other depending on your design requirements.

Actions in AppBar

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

The actions constructor is used to putting a list of widgets 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.

Conclusion

That’s all for this article, hope you enjoyed it and have learned how to properly customize Flutter appbar widget. Implement it in your code and share your experience with us. We would be looking forward to your response.

Hope to see you in our next articles in which we will dig deep into the app bar and other amazing widgets. Thank you.