Creating a Custom App Bar with flutter

Welcome to the day one of the series “Playing With The Flutter Widgets“, In this flutter tutorial you will learning about flutter widgets by really getting your hands dirty. I will discuss all the major properties used by the particular widget with including the code snippets and the Screenshots. So let’s start With I think the most used widget in flutter and the you can say the basic building block for your own custom designs – The Container Widget.

Container- Paint as you like and Make what you want.

This is what we will achieving today after the completion of this article and in the process we will be learning about Container and its various properties like decoration, margins height and gradient etc.

A color variant you can try as many as combination as you like imagination is the limit and if you need help a bit in finding some linear combinations without getting your hands dirty then you look for this website where you can find how different linear combinations look like, https://uigradients.com/.

So Let’s start and get our hands a little dirty

Start with a new Stateless Widget class and let’s call it GradientBar and it will contain all the code of our new App bar.

Tip: Type “stless” in android studio and it’s smart enough to know you are creating Stateless Widget and will create some default code for you and make your work a little bit easier.

As you can see it’s returning by default a Container Widget which is indeed we will be using to create our custom app bar but it’s true you will be using it in your future for creating your own custom widget as it is indeed can be considered as a basic building block for your own custom widget.

As our App bar will contain a title so we will create a string variable for storing that title and will pass that to the constructor so when we will be using that this custom bar we can assign it in the constructor and change whenever we need to in a single place. And also another variable for app bar height I’m using ” 66.0 “what I think was good enough you could try any other value if you like.

code snippet for making a variable in flutter for storing title of the appbar.

Now let’s give our container height and color to see how visually it’s going to look. And create a new GradientAppBar in your scaffold body in the main. dart (I am just showing you how to create this gradient bar so will be just creating in main.dart but you can create it in the file where you want your app bar to show) and give it a title say ” Title”, you can give whatever you like. And after this in your container child property use a Center widget (Its work is to keep the child object in center alignment, in this case, our text object ) and in that create a Text Widget and use “title” variable value in it. Here are the changes in the code and what our app bar would look like.

As you can see our Text widget is not in center as we want it to it’s touching the status bar and it is because we calculated the height of the container widget as whole and forget to count of the status bar also so we have to add height of the status bar to our containers’ size and also a padding of that amount to it, so that text widget will look a little more in the center and we can get status bar’s height using MediaQuery class which gives us access to the specifications like the size of our phones and much more. You can Use it by creating a new final variable in the Build method and assign it “MediaQuery.of(context).padding.top”. and add this to the height of our container you will get the text in the center a bit.

Now let’s give some style to our text so change the style property as follows. These are my custom properties you can change according to you if you want. And change the container color for now to black so you can see the text more clearly. Colors.color_name allows us to access colors from the material colors. And I have used font family ” Poppins ” and I will show you in the end how to add yours also.

Now comes the main part that is creating the look of our app and we will do this using ” decoration ” property of container widget which allows us to customize the design of the container widget as we like and that all too easily. Now in decoration property use “ BoxDecoration() ” which is good for customizing the square, rectangle shapes. To give the container the circular corner effect we will use the borderRadius property of BoxDecoration. You can use that borderRadius property like this as you can see below. And remember to remove the color property of Container because when we use BoxDecoration then we have to use the color property of it not of Container widget because otherwise, you will get the following error as you can see below.

Now in borderRadius use BorderRadius.only() then use Radius.ciruclar(70.0) value for bottomLeft and bottomRight and you will see the following result.

Now let’s apply gradient instead of solid black color and we will be using Colors.blueAccent and Colors.purpleAccent in the gradient property now you can assign three types of the gradient in this property namely LinearGradient (distributes colors in the linear direction), Radial Gradient (distributes colors in a kind of circular direction all around it in a certain radius) and Sweep Gradient (distributing different colors in circular pattern and each color sweeping a different area or angle you can say). For this tutorial, I’m using LinearGradient and will use its properties like the color (it will take a list of colors so assign the two colors you want to as a list), begin(where the gradient starts) end(where the gradient ends) and stops (list of values from 0 to 1 where each of the colors will stop or start you can say so if two colors then two stops etc).

The last thing is adding those two icons in the app bar adding functionality to them is a whole new topic so I will be showing you the only how to implement the design in flutter. For adding those two icons to our appbar we will be using Row widget which helps us to arrange multiple children widgets in a linear manner and in this case horizontal arrangement. So wrap the text widget in a Row widget and then two icon widgets to it (Icons.menu and Icons.search and here Icons.icon_name allows us to access various icons in material icons gallery). Here are the code changes and the result.

Tip : Move the cursor to Text widget and then click the yellow bulb icon you will see a option of wrap in row widget click it and it will do the work for you.

Let’s understand the code a little bit Row widget aligns the widgets from left of the screen to the right of the screen in order as given to it in children list. The mainAxisAlignment property describes the alignments of the children along the main axis, in this case, the horizontal axis. Icon() widget allows you to display different icon widgets and modify it accordingly like colors and size.

So this brings us to the end of this tutorial and before that as I said before to how you can add your own font. You can do as follows first go to google fonts download your font. Then make a directory in root directory in flutter and say call it ” fonts ” then put the font file in it. After go to pubspec.yaml file and do as show in image below.

Poppins : Family Name and Poppins-Black.ttf : the file name in fonts file

Thanks for reading the article and make sure keep up with my blog more adventurous science, tech, UX/UI, space, programming, and flutter and a lot of interesting stuff coming around. And like if you find it useful and comment on any suggestion that I need to improve on or what stuff I need to write on that you are looking for. See you soon guys.

One Reply to “Creating a Custom App Bar with flutter”

  1. aaditya acharya says: Reply

    Nyc

Leave a Reply