Create a Custom App Bar-Flutter

Flutter is on the rolls nowadays! Everything related to UI, Flutter’s widgets can be customized and ya obviously you can create one by your own, and that’s what we are going to do today.

I’ll be building a custom App Bar, and I’ll try my best to make it as simple as possible.

This is what we are going to make:

Here is another one:

First and foremost thing you should know is that the App bar Widget is not like every other widget, AppBar implements the class PreferredSizeWidget which means that AppBar must have a preferred size.

Begin with making a file named Custom TopBar and then implement the PreferredSizeWidget

class TopBar extends StatelessWidget implements PreferredSizeWidget {  
   final String title;  
   final Widget child;  
   final Function onPressed;  
   final Function onTitleTapped;  
 
   @override 
   final Size preferredSize;   
  TopBar({@required this.title, 
    @required this.child, 
    @required this.onPressed, 
    this.onTitleTapped})
    : preferredSize = Size.fromHeight(60.0);

preferredSize variable is overridden as it is implemented from PreferredSizeWidget, here you can set the height of your wish.

Now comes the part of designing.

This is what the design Code looks like:

Back button Design:

A Sample of the UI:

And yeah, we have successfully designed our own Custom AppBar

GitHub Link to this Project:

ketanchoyal/custom_top_bar

I’m a newbie in Flutter, trying to help the community. If something is wrong feedback will be appreciated.