Material Design and Flutter

Flutter uses the version 3 of Material Design. The design system follows a given theme, which can be changed by passing an instance of ThemeData class to the application (e.g. MaterialApp or GetMaterialApp).

By default, Flutter uses a light theme, available through ThemeData.light(), while a dark theme is available through ThemeData.dark(). Below, the application uses the dark theme instead of the light theme.

Automatic theme switching

Devices often have a specific configuration for dark mode that can be enabled either by the user, or by different automations such as rules based on hour of day. Automatic theme switching has also started to become more common in other devices such as car dashboards, where dark mode be enabled e.g. based on light sensors of the car. This allows automatically enabling and disabling the dark mode e.g. in the night and when entering and leaving a tunnel.

Flutter allows defining both a default theme and a dark theme to the application, and to automatically change between them based on device settings. To define both themes, we provide values to the theme and darkTheme properties the application. As an example, below, we would create an application that uses the light theme by default, but switches to the dark theme when the device is set to dark mode.

GetMaterialApp(
  home: HomeScreen(),
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
);

When the application is run, the application will automatically switch between the light and dark themes based on the device settings. The automatic switching can be tested by changing the device settings to dark mode and running the application.

Defining themes

Themes are defined by creating a new ThemeData object and passing appropriate styles to it as properties. There are plenty of things to adjust. For example, if we would wish to change the color scheme of the application, we would provide a value to the colorScheme property. Similarly, if we would wish to change the text theme, we would provide a new value to the textTheme property.

It is also possible to change the theme of individual widgets. As an example, if we would wish to change the theme of cards, we would provide a new value to the cardTheme property, and so on.

Styling directly via code can be cumbersome though, especially when trying to visualize the changes as a whole. Due to this, there are a range of tools for theming. As an example, the theme builder at https://material-foundation.github.io/material-theme-builder/ can make defining themes easy, and if you are using Figma, there is a Figma plugin called Material Theme Builder.

One of the benefits of design systems is that they can be built upon to provide tools for creating themes that follow the design system. As an example, the theme builder at https://material-foundation.github.io/material-theme-builder/ allows defining themes based on a given image, and exporting themes directly as Flutter code.