- How Flutter theme works and what can be customised in it - How to override theme values locally for one widget - Text styles in Flutter - Interaction with system UI elements (Android and iOS)

1. Theme and style in Flutter

2. Topics
● How Flutter theme works
● What can be customized in theme
● Text style
● Interaction with System UI elements and settings (Android and iOS)

3. How Flutter theme works

4. “Everything is a widget” in Flutter and
theme too: it is just another widget at the
root of MaterialApp widget.

5. With the help of InheritedWidget current
theme properties are accessible everywhere
in the app down the widgets tree.

6. There are 4 variants of themes we can pass to
MaterialApp:
● theme – main light theme;
● darkTheme;
● highContrastTheme;
● highContrastDarkTheme.
High contrast themes are needed for
accessibility feature of OS for people with
who have problems with their vision.

7. How Flutter decides which theme to use.

8. MaterialApp themeMode allows to control which theme will be used by the app:
● system – use either the light or dark theme based on what the user has selected in the system settings;
● light – always use light theme;
● dark – always use dark theme if available.
System mode by default changes app theme automatically when system theme changed (if dark theme is
available).
To allow user manually change theme mode, themeMode should be updated when a new value is selected
and whole MaterialApp must be rebuilt (BLoC or Provider can be used for this, or other solutions).

9. Theme overriding for
local widgets
Even if global app theme was configured
properly some particular widgets may
require different theme/style settings to
match design.
For this a lot of Flutter widget comes with
style property (Text, buttons and etc.) or
parameters that control look of the widget.

10. If widget doesn’t come with style property
but needs custom theme anyway, it’s
possible to wrap this widget into Theme or
CupertinoTheme widget and pass
modified theme there.
Example of local theme override for
TextFormField input decoration

11. Sometimes it is not obvious which color or
style from theme is used by some widget
element.
In these cases inspecting widget source
code will help to find needed value fast and
decide if it can be overridden for whole app
theme or it should be overridden locally.
How TextField selects color of its label/hint

12. What can be customized
in theme

13. Flutter has two main themes setups
● ThemeData – theme settings for material widgets in app, used in MaterialApp root widget.
● CupertinoThemeData – theme data used for cupertino widgets appearance, used in CupertinoApp
root widget and inside ThemeData.

14. Ways to create ThemeData
● Default constructor ThemeData();
● ThemeData.light() – creates a light blue theme;
● ThemeData.dark() – creates dark theme with a teal secondary ColorScheme color;
● ThemeData.from() – which creates a ThemeData from a ColorScheme and textTheme if provided.

15. Theme data from ColorScheme:
Creates theme from brightness and 12
provided colors which are specified in
Material design color system.
There is tool for generating scheme colors
from selected primary and secondary
colors, but it generates 8 colors which are
different from Flutter ColorScheme.

16. Example of generated color scheme

17. ThemeData parameters
● brightness – overall theme brightness, app texts colors depends on this value;
● visualDensity – density value for specifying the compactness of various UI components;
● primaryColor, primaryColorBrightness – background color for major parts of the app (toolbars, tab
bars, etc);
● primaryColorLight – lighter version of the primaryColor;
● primaryColorDark – darker version of the primaryColor;
● canvasColor – default color of MaterialType.canvas;
● shadowColor – color that the Material widget uses to draw elevation shadows;

18. ThemeData parameters
● accentColor, accentColorBrightness – foreground color for widgets (toggles, checkboxes, overscroll
edge effect, etc);
● scaffoldBackgroundColor – color of the Material that underlies the Scaffold;
● bottomAppBarColor, bottomAppBarTheme – BottomAppBar widget customization;
● cardColor, cardTheme – Card widget customization;
● dividerColor, dividerTheme – Divider widget customization;
● focusColor – focus color used indicate that a component has the input focus;
● hoverColor – hover color used to indicate when a pointer is hovering over a component;

19. ThemeData parameters
● highlightColor – highlight color used during ink splash animations or to indicate an item in a menu is
selected;
● splashColor – color of ink splashes of InkWell widget;
● splashFactory – appearance of ink splashes produces by InkWell and InkResponse;
● selectedRowColor – color used to highlight selected rows in tables;
● unselectedWidgetColor – color used for widgets in their inactive (but enabled) state. For example,
an unchecked checkbox;
● disabledColor – color used for widgets that are inoperative, regardless of their state. For example, a
disabled checkbox;

20. ThemeData parameters
● buttonTheme – button theme for old Flutter buttons: RaisedButton and FlatButton;
● toggleButtonsTheme – default configuration of ToggleButtons widget;
● buttonColor – default fill color of the Material used in RaisedButton;
● secondaryHeaderColor – color of the header of a PaginatedDataTable when there are selected rows;
● backgroundColor – color that contrasts with the primaryColor, e.g. used as the remaining part of a
progress bar;
● dialogBackgroundColor, dialogTheme – dialogs customization;

21. ThemeData parameters
● indicatorColor – color of the selected tab indicator in a tab bar;
● hintColor – color to use for hint text or placeholder text, e.g. in TextField fields;
● errorColor – color to use for input validation errors;
● toggleableActiveColor – color used to highlight the active states of toggleable widgets like Switch,
Radio, and Checkbox;
● textTheme, primaryTextTheme, accentTextTheme – text with a color that contrasts with the card
and canvas colors, primary and accent colors;
● inputDecorationTheme – input decoration theme for text input fields;

22. ThemeData parameters
● iconTheme, primaryIconTheme, accentIconTheme – icon theme that contrasts with the card and
canvas colors, primary and accent colors;
● sliderTheme – colors and shapes used to render Slider;
● tabBarTheme – theme for customizing the size, shape, and color of the tab bar indicator;
● tooltipTheme – theme for customizing the visual properties of Tooltip;
● chipTheme – colors and styles used to render Chip;
○ platform – platform the material widgets should adapt to target (Android, iOS, macOS etc.) to
determine the current platform for the purpose of emulating the platform behavior (e.g.
scrolling or haptic effects);

23. ThemeData parameters
● materialTapTargetSize – the hit test size of certain Material widgets;
● applyElevationOverlayColor – apply a semi-transparent overlay color on Material surfaces to indicate
elevation for dark themes;
● pageTransitionsTheme – default MaterialPageRoute transitions per TargetPlatform;
● appBarTheme – theme for customizing the color, elevation, brightness, iconTheme and textTheme of
AppBar;
● scrollbarTheme – theme for customizing the colors, thickness, and shape of Scrollbar;

24. ThemeData parameters
● colorScheme – set of twelve colors that can be used to configure the color properties of most
components;
● snackBarTheme – theme for customizing colors, shape, elevation, and behavior of a SnackBar;
● floatingActionButtonTheme – theme for customizing the shape, elevation, and color of a
FloatingActionButton;
● navigationRailTheme – a theme for customizing the background color, elevation, text style, and icon
themes of a NavigationRail;

25. ThemeData parameters
● typography – the color and geometry TextTheme values used to configure textTheme,
primaryTextTheme, and accentTextTheme;
● cupertinoOverrideTheme – components of the CupertinoThemeData to override from the Material
ThemeData adaptation;
● bottomSheetTheme – theme for customizing the color, elevation, and shape of a bottom sheet;
● popupMenuTheme – theme for customizing the color, shape, elevation, and text style of popup menus;

26. ThemeData parameters
● bannerTheme – theme for customizing the color and text style of a MaterialBanner shown under AppBar;
● buttonBarTheme – theme for customizing the appearance and layout of ButtonBar widget;
● bottomNavigationBarTheme – theme for customizing the appearance and layout of
BottomNavigationBar widget;
● timePickerTheme – theme for customizing the appearance and layout of time picker widget;
● textButtonTheme, elevatedButtonTheme, outlinedButtonTheme – themes for new Flutter buttons:
TextButton, ElevatedButton, OutlinedButton;

27. ThemeData parameters
● textSelectionTheme – theme for customizing the appearance and layout of TextField widgets;
● dataTableTheme – theme for customizing the appearance and layout of DataTable widgets;
● checkboxTheme – theme for customizing the appearance and layout of Checkbox widgets;
● radioTheme – theme for customizing the appearance and layout of Radio widgets;
● switchTheme – theme for customizing the appearance and layout of Switch widgets.

28. Text style

29. A set of TextStyle-s that follows Material.io
specification.
Get needed style from context:
Theme.of(context).textTheme.headline1;
TextTheme

30. ThemeStyle parameters
● inherit – whether null values are replaced with their value in an ancestor text style (e.g., in a TextSpan tree).
If this is false, properties that don't have explicit values will revert to the defaults: white in color, a font size
of 10 pixels, in a sans-serif font face;
● color – the color to use when painting the text. If foreground is specified, this value must be null;
● backgroundColor – color to use as the background for the text;
● fontFamily – name of the font to use when painting the text (e.g., Roboto);
● fontFamilyFallback – ordered list of font families to fall back on when a glyph cannot be found in a higher
priority font family;

31. ThemeStyle parameters
● fontSize – size of glyphs (in logical pixels) to use when painting the text;
● fontWeight – typeface thickness to use when painting the text (e.g., bold);
● fontStyle – typeface variant to use when drawing the letters (e.g., italics);
● letterSpacing – amount of space (in logical pixels) to add between each letter;
● wordSpacing – The amount of space (in logical pixels) between each word;
● textBaseline – common baseline that should be aligned between this text span and its parent text span,
or, for the root text spans, with the line box;
○ alphabetic – The text baseline is the normal alphabetic baseline;
○ ideographic – text baseline is the ideographic baseline; this is the bottom of the body of the
characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by
Chinese, Japanese, and Korean scripts.);

32. ThemeStyle parameters
● height – height is non-null, the line height of the span of text will be a multiple of fontSize and be exactly
`fontSize * height` logical pixels tall;
● locale – locale used to select region-specific glyphs;
● foreground – paint drawn as a foreground for the text;
● background – paint drawn as a background for the text;
● decoration – decorations to paint near the text (e.g., an underline);
● decorationColor – color in which to paint the text decorations;
● decorationStyle – style in which to paint the text decorations (e.g., dashed);
○ decorationThickness – thickness of the decoration stroke as a multiplier of the thickness defined by
the font;

33. ThemeStyle parameters
● shadows – list of Shadow-s that will be painted underneath the text;
● fontFeatures – list of FontFeature-s that affect how the font selects glyphs.

34. If using package google_fonts custom text
theme can be applied globally:

35. Interaction with System UI
elements and settings
(Android and iOS)

36. SystemChrome class
Allows to control some system UI elements and their behavior.

37. SystemChrome.setEnabledSystemUIOverlays()
method.
Allows to control visibility of System UI: status
bar and navigation bar.
System events can trigger overlays again (e.g.
keyboard opening triggers navigation bar on
Android) and we need manually to hide them
again. Can be achieved with
restoreSystemUIOverlays() method.

38. SystemChrome.setSystemUIOverlayStyle().
Allows to set status bar and nav bar colors
on Android.
For iOS only statusbarIconBrightness and
statusBarBrightness parameters work.

39. Another way to control the look of System
elements – AnnotatedRegion widget.
It allows to set SystemUIOvelrayStyle
property for some region (widget) in layer
tree.
However, the AppBar and
CupertinoNavigationBar widgets
automatically set the system overlay style
based on its brightness or background
color.

40. Useful resources
● New Buttons and Button Themes official migration guide;
● google_fonts package;
● Panache theme viewer, WEB version;
● Material.io.

41. Ivan Myzherytskyi
Flutter Developer
Thanks!