Create a custom app bar

Flutter tips Published on

Why Go Custom?

Sometimes the standard AppBar isn't quite right for your design. You might need something completely different or more control over the layout and look. Building a custom app bar gives you total freedom!

How to Build One

The secret to making your own widget act like an app bar is to make it implement PreferredSizeWidget. This is a special instruction you add to your widget class.

What Does Implement Mean?

When a widget "implements" PreferredSizeWidget, it's promising to provide a specific piece of information: its preferred size. For an app bar, this is usually about setting its height.

Setting the Size

To set the size, you'll add a method that returns a Size object. For the height of an app bar, you can use Size.fromHeight. Flutter provides a helpful constant, kToolbarHeight, which is the standard height for toolbars. Using this helps your custom app bar fit in nicely with other standard Flutter widgets.

Using Your Custom App Bar

Once you've created your widget and made it implement PreferredSizeWidget with the preferredSize defined, you can simply put it in the appBar spot of your Scaffold.

Scaffold(
  appBar: YourCustomAppBarWidget(),
  // ... rest of your screen content
)

This is a powerful way to make your app stand out!

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

kickstarter for flutter apps

Frequently Asked Questions

Why would I need a custom app bar?

You might need a custom app bar to create a unique design that the standard Flutter AppBar doesn't easily support, giving you more creative control.

How do I make my widget work like an app bar?

You need to make your custom widget class 'implement' the `PreferredSizeWidget` interface.

How do I set the height for my custom app bar?

When you implement `PreferredSizeWidget`, you must define a `preferredSize` property, usually using `Size.fromHeight`.

Is there a recommended height for app bars?

Yes, you can use the `kToolbarHeight` constant provided by Flutter, which is the standard height for toolbars.

Read more
You may also be interested in
Create consistent animations  blog card image
Create consistent animations
Published on 2025-05-19T07:24:33.370Z
Draw and animate a round progress Using a Custom Painter  blog card image
Draw and animate a round progress Using a Custom Painter
Published on 2025-05-19T07:11:34.304Z
ApparenceKit is a flutter template generator tool by Apparence.io © 2025.
All rights reserved