ThemeData in Flutter

Theme Data Properties

  Brightness brightness,
  MaterialColor primarySwatch,
  Color primaryColor,
  Brightness primaryColorBrightness,
  Color primaryColorLight,
  Color primaryColorDark,
  Color accentColor,
  Brightness accentColorBrightness,
  Color canvasColor,
  Color scaffoldBackgroundColor,
  Color bottomAppBarColor,
  Color cardColor,
  Color dividerColor,
  Color focusColor,
  Color hoverColor,
  Color highlightColor,
  Color splashColor,
  InteractiveInkFeatureFactory splashFactory,
  Color selectedRowColor,
  Color unselectedWidgetColor,
  Color disabledColor,
  Color buttonColor,
  ButtonThemeData buttonTheme,
  ToggleButtonsThemeData toggleButtonsTheme,
  Color secondaryHeaderColor,
  Color textSelectionColor,
  Color cursorColor,
  Color textSelectionHandleColor,
  Color backgroundColor,
  Color dialogBackgroundColor,
  Color indicatorColor,
  Color hintColor,
  Color errorColor,
  Color toggleableActiveColor,
  String fontFamily,
  TextTheme textTheme,
  TextTheme primaryTextTheme,
  TextTheme accentTextTheme,
  InputDecorationTheme inputDecorationTheme,
  IconThemeData iconTheme,
  IconThemeData primaryIconTheme,
  IconThemeData accentIconTheme,
  SliderThemeData sliderTheme,
  TabBarTheme tabBarTheme,
  TooltipThemeData tooltipTheme,
  CardTheme cardTheme,
  ChipThemeData chipTheme,
  TargetPlatform platform,
  MaterialTapTargetSize materialTapTargetSize,
  bool applyElevationOverlayColor,
  PageTransitionsTheme pageTransitionsTheme,
  AppBarTheme appBarTheme,
  BottomAppBarTheme bottomAppBarTheme,
  ColorScheme colorScheme,
  DialogTheme dialogTheme,
  FloatingActionButtonThemeData floatingActionButtonTheme,
  Typography typography,
  CupertinoThemeData cupertinoOverrideTheme,
  SnackBarThemeData snackBarTheme,
  BottomSheetThemeData bottomSheetTheme,
  PopupMenuThemeData popupMenuTheme,
  MaterialBannerThemeData bannerTheme,
  DividerThemeData dividerTheme,
  ButtonBarThemeData buttonBarTheme,
ThemeData in Flutter

Brightness brightness ( The desired theme):
Brightness is an enum with two options dark and light. It helps us to distinguish which theme (light or dark) to be used.

VisualDensity visualDensity:
It defines the visual density of user interface components. Density, in the context of a UI, is vertical and horizontal ‘compactness’ of the components in the UI. It is unitless since it means different for different UI components.
The default for visual density is zero for horizontal and vertical densities, which corresponds to the default visual density of components in the Material design specification.
It does not affect text sizes, icon sizes, or padding values. For example, for a button, it affects the spacing around the child of a button. For lists, it affects the distance between the baseline of entries in the list. For chips, it only affects the vertical size, not horizontal size.

MaterialColor primarySwatch:
Look at its type. It is MaterialColor. That’s why it will contain color shades from 50 to 900. PrimarySwatch is used to configure default values for several fields including primaryColor, primaryColorBrightness, primaryColorLight, primaryColorDark, toggableActiveColor, accentColor, colorScheme, secondaryHeaderColor, textSelectionColor,backgroundColor and buttonColor

Color primaryColor:
This is the background color of major parts of the app like toolbars, tab bars, appbar, and many more.

Brightness primaryColorBrightness:
This is the brightness of the primary color. It is used to determine the color of text and icons placed on the top of the primary color.

Color primaryColorLight:
This is a lighter version of primaryColor.

Color primaryColorDark:
This is a darker version of primaryColor.

Color canvasColor:
This is default color of MaterialType.canvas (Rectangle using default theme canvas color)

Color accentColor:
The accent color is also known as a secondary color. This is foreground color for widgets like knobs, text, overscroll edge effect, etc.
The theme’s colorScheme property contains ColorScheme.secondary as well as the color that contrasts well with a secondary color called ColorScheme.onSecondary.

Brightness accentColorBrightness:
It is the brightness of the accentColor. It is used to determine the color of text and icons placed on the top of the accent color(e.g. the icons on a floating action button).

Color scaffoldBackgroundColor:
It is the background color of the Scaffold widget.

Color bottomAppBarColor:
It is the default color for BottomAppBar color. This can be overridden by specifying color in BottomAppBar e.g. BottomAppBar(color:#color);

Color cardColor:
This is the color of Material when used as a Card i.e. default color for Card widget.

Color dividerColor:
This is color of Dividers and PopMenuDividers also used between ListTiles, between rows in DataTables and so forth.

Color focusColor:
This is a focus color used to indicate that a component has input focus.

ThemeData in Flutter

import 'package:flutter/material.dart';

ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    visualDensity: VisualDensity(vertical: 0.5, horizontal: 0.5),
    primarySwatch: MaterialColor(
      <int, Color>{
        50: Color(0x1aF5E0C3),
        100: Color(0xa1F5E0C3),
        200: Color(0xaaF5E0C3),
        300: Color(0xafF5E0C3),
        400: Color(0xffF5E0C3),
        500: Color(0xffEDD5B3),
        600: Color(0xffDEC29B),
        700: Color(0xffC9A87C),
        800: Color(0xffB28E5E),
        900: Color(0xff936F3E)
    primaryColor: Color(0xffEDD5B3),
    primaryColorBrightness: Brightness.light,
    primaryColorLight: Color(0x1aF5E0C3),
    primaryColorDark: Color(0xff936F3E),
    canvasColor: Color(0xffE09E45),
    accentColor: Color(0xff457BE0),
    accentColorBrightness: Brightness.light,
    scaffoldBackgroundColor: Color(0xffB5BFD3),
    bottomAppBarColor: Color(0xff6D42CE),
    cardColor: Color(0xaaF5E0C3),
    dividerColor: Color(0x1f6D42CE),
    focusColor: Color(0x1aF5E0C3));

ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    visualDensity: VisualDensity(vertical: 0.5, horizontal: 0.5),
    primarySwatch: MaterialColor(
      <int, Color>{
        50: Color(0x1a5D4524),
        100: Color(0xa15D4524),
        200: Color(0xaa5D4524),
        300: Color(0xaf5D4524),
        400: Color(0x1a483112),
        500: Color(0xa1483112),
        600: Color(0xaa483112),
        700: Color(0xff483112),
        800: Color(0xaf2F1E06),
        900: Color(0xff2F1E06)
    primaryColor: Color(0xff5D4524),
    primaryColorBrightness: Brightness.dark,
    primaryColorLight: Color(0x1a311F06),
    primaryColorDark: Color(0xff936F3E),
    canvasColor: Color(0xffE09E45),
    accentColor: Color(0xff457BE0),
    accentColorBrightness: Brightness.dark,
    scaffoldBackgroundColor: Color(0xffB5BFD3),
    bottomAppBarColor: Color(0xff6D42CE),
    cardColor: Color(0xaa311F06),
    dividerColor: Color(0x1f6D42CE),
    focusColor: Color(0x1a311F06));

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application.

For more information about Flutter. visit