Play around with Flutter AppBar Widget

In this topic, we are going to play around with AppBar Widget in Flutter.

The AppBar displays the toolbar widgets, leading, title, and actions, above the bottom(if any). The bottom is usually used for a TabBar.

Basic AppBar

The following picture is described the basic elements of AppBar.

leading: a widget to display before the title. If this is null and automaticallyImplyLeading is set to true, the AppBar will imply an appropriate widget.

title: the primary widget displayed in the AppBar. Typically a Text widget containing a description of the current contents of the app.

actions: widgets to display after the title widget. Typically these widgets are IconButtons representing common operations. For less common operations, consider using a PopupMenuButton as the last actions.

Create UI of Facebook and Youtube AppBar

Next, we will do reverse engineer of Facebook and Youtube AppBar.

The similar points between these two apps are:

1. Use white color for AppBar
2. Use Image Logo as title
3. Use their own designed images instead of basic IconButton for Actions

These following two screenshots were taken from mobile phone.

Preparation

From above screenshots, we use Photoshop to crop what we want to create Image for Assets.

Facebook AppBar

We used Image (Facebook logo) as title and use Images instead of standard icons in IconButton.

Youtube

For youtube app bar, what different is we have circle image for Profile image.

Conclusion

AppBar Widget in flutter is very straightforward to use. We can customize many things to make our app more attractive and create a pretty UI.

You can find the whole source code in Github

References:

AppBar class - material library - Dart API