Themes

Coming from Material

If you are familiar with the ThemeData class in Material, you know it is used not only to define the color scheme and typography, but also the appearance of Material widgets.

You can have multiple themes, such as light, dark or any variation you want.

This can be a bit messy, because when it comes to the general appearance and behaviour of widgets, you probably don't want them changing between themes.

The solution

A Theme in Jolt only stores data related to:

ColorScheme
Typography
Dimensions

The appearance and behaviour of widgets is not set by the theme, but instead defined by a Style class, which hopefully you just read all about.

There are two major benefits of this approach:

You can use the values from the themes you define when creating your widget styles.
Themes are much simpler to manage.

An example

// Setup a few themes, you can go in to a lot of detail but this example uses light and dark defaults
final themes = [
  Theme(id: 'default_light', colorScheme: ColorScheme.light()),
  Theme(id: 'default_dark', colorScheme: ColorScheme.dark()),
];
 
// Use values from your themes when creating your styles
final buttonStyle = (context) => ButtonStyle(
  textStyle: context.style.bodyLarge,
);
 
// Then later when setting up your JoltApp, you can pass your themes and styles.
JoltApp(
  themes: themes,
  styles: [
    buttonStyle,
  ],
);

Theme management

Style Dimensions