Custom app theme in Flutter

Thiago Evoá
2 min readDec 20, 2021

--

Hello dev, in this article I would like to talk about organize a Flutter project, but more precisely, I wanna talk about customize the entire app theme in a single place in order to make it easy to find and maintain. Because I’ve seen a lot of projects where people defines for example a button style in a widget, I mean it’s one way to do that, but let’s try to abstract it a little more.

Well, inside the MaterialApp you may have seen a property called theme, and here is the place we should modify, in order to define all the app theme with styles, colors and all that stuff, because when a different dev arrives at the project, he/she will still use the nativly widgets from the Flutter SDK and also will use the theme defined in the project following the guidelines stablished.

As you can see, in the image bellow I replaced the theme property with a const that I created in a different file, and as I mentioned above, I modified the app theme and the FloatingActionButton widget without create a customized widget for that.

main.dart
main.dart

This file is the one responsible for doing it, and inside of it you can see that you can modify pretty much all the existing widgets, and by the way, in this file I just put a few examples, just to showcase something, but go ahead and explore more playing with all the possibilities yourself.

appTheme

And with this simple approach, the result you can see is that the colors of the entire app has changed and also the FloatingActionButton shape.

app

And that is it, I think the most important part in a project is make things easy to find, maintain and scale. So next time when you think about implementing something, try to see all the possibilities to do it and do the one that fits for you always thinking how to make things well implemented.

--

--