Custom AppBar Flutter

In the world of Flutter, the AppBar is a crucial part of any app’s layout. It serves as the topmost bar that contains essential features like navigation buttons, title, and sometimes search or notification icons. However, the default appearance and behavior might not always meet your design requirements or user experience expectations. Fortunately, Flutter provides various ways to customize the AppBar, making it highly flexible and adaptable.

Using FlexibleSpace

You can start by modifying the toolbar height and adding a flexible space to create an elaborate header section. This approach allows you to embed other widgets within the AppBar itself. Here’s how you can achieve this using Flutter:

Scaffold(
  appBar: AppBar(
    toolbarHeight: 120, // Set this height
    flexibleSpace: Container(
      color: Colors.orange,
      child: Column(
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
          Text('Four'),
        ],
      ),
    ),
  ),
)

Using PreferredSize

Another method to create a custom AppBar is by using the PreferredSize widget. This approach provides more control over the layout and appearance of your header section, allowing you to set a specific height for it:

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(120), // Set this height
    child: Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
          Text('Four'),
        ],
      ),
    ),
  ),
)

Creating a Custom AppBar Widget

You can also create a custom AppBar widget from scratch. This approach allows you to define the structure, layout, and behavior of your AppBar according to your specific needs. Below is an example code snippet that demonstrates how you can create a custom AppBar widget:

class CustomBarWidget extends StatelessWidget {
  GlobalKey _scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Container(
        height: 160.0,
        child: Stack(
          children: [
            Container(
              color: Colors.red,
              width: MediaQuery.of(context).size.width,
              height: 100.0,
              child: Center(
                child: Text(
                  "Home",
                  style: TextStyle(color: Colors.white, fontSize: 18.0),
                ),
              ),
            ),
            Positioned(
              top: 80.0,
              left: 0.0,
              right: 0.0,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20.0),
                child: DecoratedBox(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(1.0),
                      border: Border.all(
                          color: Colors.grey.withOpacity(0.5), width: 1.0),
                      color: Colors.white),
                  child: Row(
                    children: [
                      IconButton(
                        icon: Icon(
                          Icons.menu,
                          color: Colors.red,
                        ),
                        onPressed: () {
                          print("your menu action here");
                          _scaffoldKey.currentState.openDrawer();
                        },
                      ),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            hintText: "Search",
                          ),
                        ),
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.search,
                          color: Colors.red,
                        ),
                        onPressed: () {
                          print("your menu action here");
                        },
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.notifications,
                          color: Colors.red,
                        ),
                        onPressed: () {
                          print("your menu action here");
                        },
                      ),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Conclusion

In this post, we’ve explored various ways to customize the AppBar in Flutter. Whether you need a more elaborate header section or want to create your own custom widget from scratch, Flutter provides the necessary tools and flexibility to achieve your design goals. By experimenting with different approaches and techniques, you can take full advantage of the AppBar’s potential and elevate your app’s user experience.