Summary

The website content provides guidance on implementing Flutter best practices for AppBar theming, emphasizing the correct use of themes to avoid common issues with icon and action button styling in line with Material Design 3 (MD3) specifications.

Abstract

The article titled "Flutter Best Practices, AppBar Themes The Right Way" addresses the common challenge of correctly theming the AppBar in Flutter applications. It highlights the existence of the Primary Icon Theme, which is crucial for applying the primary color to icons in navigational components like the AppBar and SliverAppBar. The author demonstrates how to apply the primary color, Material Design 3 icon size, and shadow colors to the Primary Icon Theme. The article further explains the hierarchy of theme overrides in Flutter, which includes the UI item in a component, the complex component's theme, ThemeData, and the expression of the UI component on the screen. It emphasizes setting themes at MD3 defaults and only overriding when necessary to maintain a non-brittle theme system. The author provides code examples for setting the AppBar Theme according to MD3 specs, including the use of surfaceTint introduced in Flutter 2.13.0-4. The article concludes by showcasing how to apply a design twist to the AppBar shape at the ThemeData level, ensuring that the screen expression of the AppBar remains clean and declarative.

Opinions

The author believes that not using themes correctly when theme-ing the AppBar can lead to trouble, indicating a common mistake among developers.
The author suggests that maintaining themes and apps can be challenging if not following best practices, implying that deviations from the MD3 spec can lead to brittle designs.
By providing code examples and emphasizing the use of MD3 specs, the author conveys a strong opinion on adhering to these guidelines for a more maintainable and scalable Flutter application design.
The author's approach to theme-ing is geared towards ease of use and understanding, suggesting that following the outlined hierarchy and practices simplifies the development process.

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:

1. UI item in a component

2. Theme of the complex component

3. ThemeData

4. Expression Of the UI component in the Screen

So the levels of overrides is 2 to 3 levels deep by the time you get to the app screen. To keep from themes and apps being brittle to maintain, it is a best practice to set Themes at the MD3 defaults and override when you put your own design spin on the MD3 spec suggestions.

Thus, we need to set the AppBar Theme with the MD3 specs:

Notice that we apply the primary icon theme to iconTheme and the actionsIconTheme property slots in the appbar theme. Also, as of Flutter 2.13.0.4 we have surfaceTint for the appbar theme.

So what about the design twist on appbar shape? Since that is deviating from the MD3 spec, that gets applied at the ThemeData level:

Then that leaves the screen expression of the AppBar nice and clean and declarative understandable:

Conclusion

See, it’s theme-ing is easier if you keep the Widget Property Theme Override hierarchy in mind.

About Me

Former uncontrolled ADHD’er starting a flutter studio startup. Bootstrapping my startup with the freemium-and-paid-ui-kits-in-subject-search-engines business model that the Creative Tim startup pioneered.

Upcoming paid templates can be found at:

GumRoad https://app.gumroad.com/fredgrott

ThemeForest and CodeCanyon from Envato https://themeforest.net/user/fredgrott

https://codecanyon.net/user/fredgrott

You can find my Medium Article Friend Links through my social platform posts on:

LinkedIN https://www.linkedin.com/in/fredgrottstartupfluttermobileappdesigner/

Twitter https://twitter.com/fredgrott

Xing https://www.xing.com/profile/Fred_Grott/cv