Flutter: Themes

2 min readMar 20, 2019

If you want your Flutter app to have a stand out user experience I recommend to use Flutters theme widget. It can be used to define application wide colors , fonts and text styles. This theme can than be referenced within each widget in your app.

In Flutter you can design custom themes with material app widget, they can be dark, light or colorful. The style depends on your preferred color set.

In android we collect all the theme related data in a resource directory, but in Flutter we are able to declare the theme inside the root widget of the project.

MaterialApp(
    ...
    theme: ThemeData( ... ), // declared app theme
    ...
);

The app theme can than be individualized by defining custom colors, fonts etc. inside the ThemeData widget.

Define Application wide Colors

ThemeData(
    brightness:     Brightness.light,
    primaryColor:   Color(#003c7e),
    accentColor:    Color(#4487c7),
...
)

Declare Application wide Fonts

ThemeData(
    fontFamily: 'Roboto',
    
    textTheme: TextTheme( ... )
)

Declare Application wide TextTheme

TextTheme(
    headline:    TextStyle(fontSize: 36px, ... ),
    title:       TextStyle(fontSize: 24px, ... ),
    body:        TextStyle(fontSize: 12px, ... ),
)

The custom application theme has been declared and can be used everywhere within your app using the Theme.of() function. If you worked with Inherited widget before you recognize a similarity (GlobalValues.of()).

Set Theme in Widgets

Container(
    color: Theme.of(context).primaryColor,    
    child: Text('custom theme', 
                 style: Theme.of(context).textTheme.body
    )
)

Recap

Now you are able to declare a custom theme which allows you to define your theme at a central position and reference the attributes everywhere in your app.

I hope this article helps you to get started with Flutter and UI/UX related topics, feel free to check my other articles for more Flutter concepts.Flutter

Happy coding …

Business Blog

Tino Kallinich, Autor bei inovex-Blog

Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the…

www.inovex.de

2D Animation Repository

2D — Tino Kallinich

Bring your apps and games to life with real-time animation. Flare is a powerful design and animation tool, which allows…

www.2dimensions.com

Github Repository

SeemannMx — Overview

SeemannMx has 20 repositories available. Follow their code on GitHub.

github.com

Sources & Quotes: