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 add decoration with rounded corner to get the round corner in the bottom of the Appbar. Used Row widget to add child components like text and the Icons inside the appbar

Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(double.infinity, 100),
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [BoxShadow(
              color: Colors.black12,
              spreadRadius: 5,
              blurRadius: 2
            )]
          ),
          width: MediaQuery.of(context).size.width,
          height: 100,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20))
            ),
            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.