Create custom Appbar to Flutter App

The default Appbar provided by Flutter is kind of boring and not much good looking. Maybe you want to change the Appbar to match with your product design guideline.

 

Customizing the Appbar is super easy in flutter you will be able to add cool custom design for that. In this article, you will learn how to create an Appbar with the round corner in the bottom.

 

In Appbar , you must provide PreferredSize widget.

This widget does not impose any constraints on its child, and it doesn't affect the child's layout in any way. It just advertises a preferred size which can be used by the parent

- PreferredSize - api.flutter.dev

 

In there you can use ClipRRect widget get the round corner in the bottom of the Appbar. Inside the ClipRRect you can provide Container as a child widget with Row widget to add child components like text and the Icons.

 

This is the full code.

Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(null, 100),
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [BoxShadow(
              color: Colors.black12,
              spreadRadius: 5,
              blurRadius: 2
            )]
          ),
          width: MediaQuery.of(context).size.width,
          height: 100,
          child: ClipRRect(
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(15),
                bottomRight: Radius.circular(15)
            ),
            child: Container(
              color: Colors.blueAccent,
              child: Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(Icons.navigate_before,size: 40,color: Colors.white,),
                    Text("Foodbar",style: TextStyle(fontSize: 30,color: Colors.white),),
                    Icon(Icons.navigate_before,color: Colors.transparent,),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),

      body: Center(
      ),
    )

 

This is how it looks like and you can customize based on your need.

 

Flutter appbar

 

 

 

  1. what is the relationship between the preferredSize’s property (null, 100) and the container’s height 100 ??

  2. hei can you tell me how to automatically add a back button to the custom navbar?

Leave a Reply

Your email address will not be published. Required fields are marked *

x