Flutter Custom Appbar

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.

      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(
Flutter appbar




Leave a Reply