Usage of ThemeData Class in Flutter

In this article, we will explore the properties/contents of ThemeData class and how it will effect whole flutter project.

This article is will be a direct example for the article Exploring Themes in Flutter using GetX.

So, as we make a separate file for the theme, below will be the code:

class Theme {
  String defaultFont = "Poppins";

  static final lightTheme = ThemeData(
    primarySwatch: Palette.kToDark,
    primaryColor: red,
    brightness: Brightness.light,
    scaffoldBackgroundColor: white, // background color for every screen
    useMaterial3: true,
    fontFamily: defaultFont, // font style
    textSelectionTheme: TextSelectionThemeData(cursorColor: red), // cursor color
    iconTheme: IconThemeData(color: red), //icon color
    
    // icon button
    iconButtonTheme: IconButtonThemeData(
      style: ButtonStyle(
        elevation: MaterialStateProperty.resolveWith<double>((states) => 0),
        iconColor:
            MaterialStateProperty.resolveWith<Color>((states) => red),
        textStyle: MaterialStateProperty.resolveWith<TextStyle>(
            (states) => const TextStyle(fontWeight: FontWeight.bold)),
      ),
    ),

    // scroll bar
    scrollbarTheme: ScrollbarThemeData(
      thumbColor:
          MaterialStateProperty.resolveWith<Color>((states) => red),
      interactive: true,
      trackColor: MaterialStateProperty.resolveWith<Color>(
          (states) => grey.withOpacity(0.5)),
      thickness: MaterialStateProperty.resolveWith<double>((states) => 5.0),
    ),

    // radio button
    radioTheme: RadioThemeData(
      fillColor:
          MaterialStateProperty.resolveWith<Color>((states) => red),
    ),

    // switch
    switchTheme: SwitchThemeData(
      thumbColor: MaterialStateProperty.resolveWith<Color>((states) => white),
    ),

    // checkbox
    checkboxTheme: CheckboxThemeData(
      checkColor: MaterialStateProperty.resolveWith<Color>((states) => white),
    ),

    // alert dialog
    dialogTheme: DialogTheme(
      surfaceTintColor: white,
      shape: Border.all(color: grey.withOpacity(0.5)),
    ),

    // app bar of Scafold
    appBarTheme: AppBarTheme(
      centerTitle: true,
      backgroundColor: white,
      scrolledUnderElevation: 0,
      titleTextStyle: TextStyle(
        fontWeight: FontWeight.w500,
        color: black,
        fontSize: 23, //20
      ),
      iconTheme: IconThemeData(color: red),
      elevation: 0,
      actionsIconTheme: IconThemeData(color: red),
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: white,
        statusBarIconBrightness: Brightness.dark,
      ),
    ),

    // elevated button
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: red,
        elevation: 0,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        textStyle: const TextStyle(
          // fontWeight: FontWeight.bold,
          fontFamily: defaultFont,
        ),
      ),
    ),

    // outlined button
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        elevation: 0,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        side: BorderSide(color: red),
        textStyle: const TextStyle(
          // fontWeight: FontWeight.bold,
          fontFamily: defaultFont,
        ),
      ),
    ),

    // text button
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        elevation: 0,
        textStyle: const TextStyle(
          fontWeight: FontWeight.w500,
          fontFamily: defaultFont,
        ),
      ),
    ),

    // TextFormField decoration
    inputDecorationTheme: InputDecorationTheme(
      fillColor: white,
      filled: true,
      errorStyle: TextStyle(color: red),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: grey,
          width: 0.5,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: grey,
          width: 0.5,
        ),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: red,
          width: 0.5,
        ),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: red,
          width: 0.5,
        ),
      ),
      disabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: grey,
          width: 0.5,
        ),
      ),
    ),
  );

  static Color black = Colors.black,
      white = Colors.white,
      grey = Colors.grey,
      red = Colors.red,
      transparent = Colors.transparent,
      blue = Colors.blue,
      green = Colors.green;
}

Except these, there are numerous other properties that can be used. The above one’s are most commonly used. To understand more, visit ThemeData.

That’s it from my side. Please share your thoughts through comments and let me know if there are any corrections.

Thank You.