How to Create a Custom AppBar Widget

How to Create a Custom AppBar Widget?

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:

Above Code Output
Above Code 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:

custom app bar widget
custom app bar widget

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 🙂

Abhishek Dhanani

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.

Leave a comment

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


Discuss Your Project

Connect with Flutter Agency's proficient skilled team for your app development projects across different technologies. We'd love to hear from you! Fill out the form below to discuss your project.

Build Your Agile Team

Hire Skilled Developer From Us

"*" indicates required fields

✓ Valid number ✕ Invalid number

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number