How to Create a Custom AppBar Widget?

• Flutter
• Flutter Widget Guide

AppBar Widget is the main widget in any flutter app. It sits at the top of the application and mostly controls major action items. So in today’s article, we will go through how to create a Custom AppBar Widget.

Elevate the visual appeal of your Flutter app with a personalized touch by creating a custom AppBar widget. In this informative blog, we’ll walk you through the step-by-step process of designing and implementing a custom AppBar that perfectly aligns with your app’s branding and user interface. Explore advanced Flutter techniques, such as customizing colors, shapes, icons, and animations, to create a visually stunning and functional AppBar that seamlessly integrates into your app’s layout.

Unlock the power of Flutter’s widget composition and customization capabilities as we guide you through the process of building a unique AppBar that captures your app’s essence. Join us on this creative journey and enhance your app’s aesthetics and user experience by crafting a custom AppBar widget that stands out from the crowd.

How to Create a Custom AppBar Widget?

Users can create a custom widget using the below code snippet:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: setAppBar(),
    );
  }
  PreferredSizeWidget setAppBar() {
    return AppBar(
        backgroundColor: Colors.blue,
        automaticallyImplyLeading: true,
        elevation: 0.0, // for elevation
        titleSpacing: 0.0, // if you want remove title spacing with back button
        title: const Text(
          'About US',
        ),
        leading: Material(
          //Custom leading icon, such as back icon or other icon
          color: Colors.transparent,
          child: InkWell(
              onTap: () {
                Navigator.of(context).pop();
              },
              splashColor: Colors.grey,
              child: Container(
                  padding: const EdgeInsets.fromLTRB(12.0, 16.0, 16.0, 16.0),
                  child: const Icon(Icons.arrow_back_ios_new))),
        ));
  }

Output:

Custom AppBar widget will look like the below:

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
    CustomAppBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key);

    @override
    final Size preferredSize; // default is 56.0

    @override
    _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>{

    @override
    Widget build(BuildContext context) {
        return AppBar( title: Text("Sample App Bar") );
    }
}

You can also give try to the below code snippet

class AppBars extends AppBar {
  AppBars({super.key})
      : super(
          iconTheme: const IconThemeData(
            color: Colors.black, //change your color here
          ),
          backgroundColor: Colors.white,
          title: const Text(
            "this is app bar",
            style: TextStyle(color: Colors.black),
          ),
          elevation: 0.0,
          automaticallyImplyLeading: false,
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.notifications),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.person),
              onPressed: () {},
            ),
          ],
        );
}

AppBar implements the class PreferredSize Widget which means that AppBar must have a preferred size.

The preferred size variable is overridden as it is implemented from PreferredSizeWidget.

So here is how you can set the height of your wish.

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
  CustomAppBar({Key key}) : preferredSize = Size.fromHeight(60.0), super(key: key);

  @override
  final Size preferredSize;

  @override
  _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>{

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('App Bar'),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.add, color: Colors.white,),
        ),
      ],
    );
  }
}

Use it like the below:

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: CustomAppBar()
    );
  }

So the above code will give us output like this:

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through how to create a custom AppBar Widget in flutter.

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments below if you have any doubts regarding Flutter Development!! We’d love to assist you 🙂

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.