Theme Widget – Flutter Widget Guide By Flutter Agency

Users can either define app-wide themes or use Theme Widget that defines the colors and font styles for a particular part of the application. In fact, app-wide themes are just Theme Widget created at the root of an app by the MaterialApp.

What is Theme Widget in Flutter?

The Theme Widget allows you to set many default styles in your apps, such as colors, font styles, button styles, and more. In this section, we’ll look at how to use the Theme.

The Theme Widget allows you to declare styles that will be, in some instances, automatically applied throughout your app. In instances where your styles are not applied or need to be overridden, the Theme Widget is accessible anywhere in your widget tree.

The class user will use to configure your Theme is called ThemeData, and to add a theme to your app you’d pass a ThemeData object to the MaterialApp.theme property of your app. You can also create your own Theme Widget and pass it a ThemeData object. The theme is just a widget, which means you can use it anywhere you can use any widget! The theme properties that any given widget uses are inherited from the closest theme widget up the tree. In practice, this means you can create multiple Theme Widgets throughout your app, which will override the top-level theme for everything in that sub-tree.

The constructor of the Theme will look like below :

ThemeData({
    Brightness brightness,
    VisualDensity visualDensity,
    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,
     NavigationRailThemeData navigationRailTheme,
     Typography typography,
     CupertinoThemeData cupertinoOverrideTheme,
     SnackBarThemeData snackBarTheme,
     BottomSheetThemeData bottomSheetTheme,
     PopupMenuThemeData popupMenuTheme,
     MaterialBannerThemeData bannerTheme,
     DividerThemeData dividerTheme,
     ButtonBarThemeData buttonBarTheme,
     });

How to use Theme Widget in Flutter?

The following code snippet tells us how to implement Theme Widget in Flutter.

var theme = ThemeData(
  fontFamily: "Cabin",
  primaryColor: Colors.green,
  accentColor:Colors.pink,
  primaryTextTheme: Theme.of(context).textTheme.apply(
        bodyColor: Colors.orangeAccent,
        displayColor: Colors.purple,
      ),
  textTheme: Theme.of(context).textTheme.apply(
        bodyColor: Colors.blueAccent,
        displayColor: Colors.cyan,
      ),
);

To Apply a Theme across an entire app, provide a ThemeData to the MaterialApp constructor.

If no theme is provided, Flutter creates a default theme for you.

MaterialApp(
  title: title,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  )
);

Theme 2 :

MaterialApp(
  title: title,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  )
);

Properties

• accentColor: The foreground color for widgets. The accent color is also known as the secondary color.

• accentColorBrightness: The brightness of the accentColor. Used to determine the color of text and icons placed on top of the accent color.

• accentIconTheme: An icon theme that contrasts with the accent color.

• accentTextTheme: A text theme that contrasts with the accent color.

• appBarTheme: A theme for customizing the color, elevation, brightness, icon theme, and textTheme of AppBars.

• applyElevationOverlayColor: Apply a semi-transparent overlay color on Material surfaces to indicate elevation for dark themes.

• backgroundColor: A color that contrasts with the primaryColor, e.g. used as the remaining part of a progress bar.

• bannerTheme: A theme for customizing the color and text style of a MaterialBanner.

• bottomAppBarColor: The default color of the BottomAppBar.

• bottomAppBarTheme: A theme for customizing the shape, elevation, and color of a BottomAppBar.

• bottomSheetTheme: A theme for customizing the color, elevation, and shape of a bottom sheet.

• brightness: The brightness of the overall theme of the application. Used by widgets like buttons to determine what color to pick when not using the primary or accent color.

• buttonBarTheme: A theme for customizing the appearance and layout of ButtonBar widgets.

• buttonColor: The default fills color of the Material used in RaisedButtons.

• canvasColor: The default color of MaterialType.canvas Material.

• cardColor: The color of Material when it is used as a Card.

• cardTheme: The colors and styles used to render Card.

• chipTheme: The colors and styles used to render Chips.

• colorScheme: A set of thirteen colors that can be used to configure the color properties of most components.

• cupertinoOverrideTheme: Components of the CupertinoThemeData to override from the Material ThemeData adaptation.

• cursorColor: The color of cursors in Material-style text fields, such as TextField.

• dialogBackgroundColor: The background color of Dialog elements.

• dialogTheme: A theme for customizing the shape of a dialog.

• disabledColor: The color used for widgets that are inoperative, regardless of their state.

• dividerColor: The color of Dividers and PopupMenuDividers, also used between ListTiles, between rows in DataTables, and so forth.

• dividerTheme: A theme for customizing the color, thickness, and indents of Dividers, VerticalDividers, etc.

• errorColor: The color to use for input validation errors, e.g. in TextField fields.

• floatingActionButtonTheme: A theme for customizing the shape, elevation, and color of a FloatingActionButton.

• focusColor: The focus color used to indicate that a component has the input focus.

• hashCode: A hash code is a single integer that represents the state of the object that affects operator == comparisons.

• highlightColor: The highlight color used during ink splash animations or to indicate an item in a menu is selected.

• hintColor: The color to use for hint text or placeholder text, e.g. in TextField fields.

• hoverColor: The hover color used to indicate when a pointer is hovering over a component.

• iconTheme: An icon theme that contrasts with the card and canvas colors.

• dividerTheme: A theme for customizing the color, thickness, and indents of Dividers, VerticalDividers, etc.

• indicatorColor: The color of the selected tab indicator in a tab bar.

• inputDecorationTheme: The default InputDecoration values for InputDecorator, TextField, and TextFormField are based on this theme.

• materialTapTargetSize: Configures the hit test size of certain Material widgets.

• navigationRailTheme: A theme for customizing the background color, elevation, text style, and icon themes of a NavigationRail.

• pageTransitionsTheme: MaterialPageRoute.buildTransitions delegates to a PageTransitionsBuilder whose PageTransitionsBuilder.platform matches platform. If a matching builder is not found, a builder whose platform is null is used.

• platform: The platform the material widgets should adapt to target.

• popupMenuTheme: A theme for customizing the color, shape, elevation, and text style of popup menus.

• primaryColor: The background color for major parts of the app (toolbars, tab bars, etc)

• primaryColorBrightness: The brightness of the primaryColor. Used to determine the color of text and icons placed on top of the primary color (e.g. toolbar text).

• primaryColorDark: A darker version of the primaryColor.

• primaryColorLight: A lighter version of the primaryColor.

• primaryIconTheme: An icon theme that contrasts with the primary color.

• primaryTextTheme: A text theme that contrasts with the primary color.

• scaffoldBackgroundColor: The default color of the Material that underlies the Scaffold. The background color for a typical material app or a page within the app.

• secondaryHeaderColor: The color of the header of a PaginatedDataTable when there are selected rows.

• selectedRowColor: The color used to highlight selected rows.

• sliderTheme: The colors and shapes used to render the Slider.

• snackBarTheme: A theme for customizing colors, shape, elevation, and behavior of a SnackBar.

• splashColor: The color of ink splashes.

• splashFactory: Defines the appearance of ink splashes produces by InkWell and InkResponse.

• tabBarTheme: A theme for customizing the size, shape, and color of the tab bar indicator.

• textSelectionColor: The color of text selections in text fields, such as TextField.

• textTheme: Text with a color that contrasts with the card and canvas colors.

• toggleableActiveColor: The color used to highlight the active states of toggleable widgets like Switch, Radio, and Checkbox.

• toggleButtonsTheme: Defines the default configuration of ToggleButtons widgets.

• tooltipTheme: A theme for customizing the visual properties of Tooltips.

• typography: The color and geometry TextTheme values used to configure textTheme, primaryTextTheme, and accentTextTheme.

• unselectedWidgetColor: The color used for widgets in their inactive (but enabled) state. For example, an unchecked checkbox. Usually contrasted with the accentColor.

• visualDensity: The density value for specifying the compactness of various UI components.

• runtimeType: A representation of the runtime type of the object.

Conclusion:

In this article, we have been through What is Theme Widget in Flutter along with its properties.

Thanks for reading !!!
Need more assistance with Flutter??

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.