Flutter : Themedata

 

Flutter: Themes

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.