Flutter Best Practices, AppBar Themes The Right Way

Ever have trouble setting the hamburger-menu icon or the actions icons on the appbar? Well, that is an indicator that you are not using themes correctly when theme-ing the AppBar. Let me show the Flutter Best Practices way of theme-ing the AppBar.

What Is The Primary Icon Theme

The Primary Icon Theme exists as there are certain navigational components that need the primary color applied to icons and it just so happens that the AppBar component is one of those components[Yes, SliverAppBar is the other component, but keep in mind it does not have its own component Theme]

The Primary Icon Theme is defined like this:

I am just applying the primary color, the Material Design 3 icon size, and shadow colors.

Now, let’s move up to the AppBar Theme.

AppBar Theme

Everything in Flutter Theme-ing follows a Widget Property Theme Override hierarchy: