How to Create a Custom AppBar in Flutter

Any Flutter app must have the AppBar since it offers a standardised way to display navigation and actions. By default, Flutter provides a selection of standard AppBar designs, but occasionally you might want to develop a special AppBar to coordinate with the distinctive design or branding of your app.

This post will go over each step of how to make a custom AppBar in Flutter.

How to Create a Custom AppBar in Flutter

Introduction

An excellent user interface that improves the user experience is essential when creating a Flutter app. The AppBar, which is often located at the top of the screen and offers quick access to navigation and activities, is a crucial component of this user interface.

Understanding the AppBar in Flutter

Before we dive into creating a custom AppBar in Flutter, let’s first understand the fundamentals. In Flutter, the app bar displayed at the top of the screen is implemented using the AppBar widget. It gives numerous options and ways to modify its features and actions.

How to Create a Custom AppBar in Flutter

Changing the Background Color

The background colour of the AppBar can be altered as one method to personalise it. To set the desired colour, utilise the backgroundColor property.

backgroundColor: Colors.white,

Adding a Title

A title that defines the current screen or offers context is frequently included in the AppBar. By setting the title property with a Text widget, you can add a title.

title: Text(
        title,
        style: TextStyle(color: Colors.black),
      ),

Adding Actions

Users can perform specific tasks by clicking on buttons or icons, which are commonly used to symbolise actions. You can use the actions property and supply a list of widgets to add actions to the AppBar.

actions: [
          InkWell(
            onTap: () {},
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(
                Icons.notifications,
                size: 20,
              ),
            ),
          ),
        ],

Customizing the Text Style

The title and actions of the AppBar’s text can also be changed. The textTheme property allows you to change the font’s size, colour, and weight.

Creating a Custom AppBar Widget

Example

import 'package:flutter/material.dart';


class CustomAppBar extends StatefulWidget {
  CustomAppBar({Key? key}) : super(key: key);

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

class _CustomAppBarState extends State<CustomAppBar> {

  @override
  void initState() {

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      elevation: 0,
      toolbarHeight: 70,
      backgroundColor: Colors.white,
      centerTitle: true,
      iconTheme: IconThemeData(color: Colors.grey),
      title: SizedBox(
          width: 100,
          child: Container(
              width: 200,
              height: 200,
              child: ImagesAsset.appLogo.isNotEmpty
                  ? Image(
                      image: NetworkImage(
                        ImagesAsset.appLogo,
                      ),
                    )
                  : null)),
    );
  }
}

Once you have created the custom AppBar widget, you can reuse it across different screens or widgets in your app. This allows you to maintain consistency and save development time

Conclusion

In conclusion, you can customise your app’s user interface and offer a distinctive branding experience by building a bespoke AppBar in Flutter. By comprehending the basics of the AppBar widget and implementing adjustments, you may create an app bar that complements the look of your app.

FAQs