Created by Tatas Hidayat, last modified on Jun 15, 2022

Status

DRAFT

Impact

MEDIUM

Driver

Andre Laksmana (Unlicensed) Tatas Hidayat (Unlicensed)

Approver

Péter Cseh (Unlicensed) Kristína Švecová (Unlicensed)

Contributors

Péter Cseh (Unlicensed) Kristína Švecová (Unlicensed)

Informed

Martin Vodila (Unlicensed)

Due date

Resources

Flutter Theme

Type

Name

Description

Color

ColorScheme?

colorScheme

Reference:

Contains Colors configurations like:

Mandatory

  • brightness : Light or Dark

  • primary

  • onPrimary

  • secondary

  • onSecondary

  • error

  • onError

  • background

  • onBackground

  • surface

  • onSurface

Optional

  • primaryContainer

  • onPrimaryContainer

  • secondaryContainer

  • onSecondaryContainer

  • tertiary

  • onTertiary

  • tertiaryContainer

  • onTertiaryContainer

  • errorContainer

  • onErrorContainer

  • surfaceVariant

  • onSurfaceVariant

  • outline

  • shadow

  • inverseSurface

  • onInverseSurface

  • inversePrimary

TYPOGRAPHY & ICONOGRAPHY

String

fontFamily

Font Familty

TextTheme

primaryTextTheme

Reference:

Contains text configuration like, font size, spacing, style, etc. It will contains:

  • headline1

  • headline2

  • headline3

  • headline4

  • headline5

  • headline6

  • subtitle1

  • subtitle2

  • bodyText1

  • bodyText2

  • caption

  • button

  • overline

COMPONENT THEMES

AppBarTheme?

appBarTheme

It will contains styling of each basic component.

Reference:

MaterialBannerThemeData?

bannerTheme

BottomAppBarTheme?

bottomAppBarTheme

BottomNavigationBarThemeData?

bottomNavigationBarTheme

BottomSheetThemeData?

bottomSheetTheme

ButtonBarThemeData?

buttonBarTheme

ButtonThemeData?

buttonTheme

CardTheme?

cardTheme

CheckboxThemeData?

checkboxTheme

ChipThemeData?

chipTheme

DataTableThemeData?

dataTableTheme

DialogTheme?

dialogTheme

DividerThemeData?

dividerTheme

DrawerThemeData?

drawerTheme

ElevatedButtonThemeData?

elevatedButtonTheme

FloatingActionButtonThemeData?

floatingActionButtonTheme

ListTileThemeData?

listTileTheme

NavigationBarThemeData?

navigationBarTheme

NavigationRailThemeData?

navigationRailTheme

OutlinedButtonThemeData?

outlinedButtonTheme

PopupMenuThemeData?

popupMenuTheme

ProgressIndicatorThemeData?

progressIndicatorTheme

RadioThemeData?

radioTheme

SliderThemeData?

sliderTheme

SnackBarThemeData?

snackBarTheme

SwitchThemeData?

switchTheme

TabBarTheme?

tabBarTheme

TextButtonThemeData?

textButtonTheme

TextSelectionThemeData?

textSelectionTheme

TimePickerThemeData?

timePickerTheme

ToggleButtonsThemeData?

toggleButtonsTheme

TooltipThemeData?

tooltipTheme

Material Design Implemented By Jago

App Theme Configuration

In order to achieve dark-light mode, we need to use the material theme. We should use a theme bloc which will be the builder of the Material App. This bloc will have a state containing theme data. Upon app init, we would need to read the preferred theme from local first, if it does not exist then use the default (light).

Once the user changes the preferred theme, it would add an event (via event bus) to Theme Bloc, and it rebuilds the child widget.

From the widget and screen side, we should always use the value from the context theme. So no more overriding the default TextStyle, Color, and other widget-specific styles.

Attachments:

screencapture-app-zeplin-io-project-5dca2c8d6b445d0675b07a70-dashboard-2022-04-27-12_06_08.pdf (application/pdf)
image-20220615-090553.png (image/png)