Applying theming to Flutter App

main.dart

// Work in progress

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: MyAppTheme.light,
      darkTheme: MyAppTheme.dark,
      home: MyMainApp(),
    );
  }
}

class MyMainApp extends StatelessWidget {
  const MyMainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
          child: Padding(
        padding: MyAppStyles.smallAllPadding,
        child: ElevatedButton(onPressed: () {}, child: Text('Elevated Button')),
      )),
    );
  }
}

//Styles

class MyAppStyles {
  static const TextStyle elevatedButtonTextStyle =
      TextStyle(color: Colors.black, fontWeight: FontWeight.bold);

//Custom Padding Inserts
  static const xxxsmallHorizontalPadding =
      EdgeInsets.symmetric(horizontal: 4.0);
  static const xxsmallHorizontalPadding = EdgeInsets.symmetric(horizontal: 8.0);
  static const smallHorizontalPadding = EdgeInsets.symmetric(horizontal: 12.0);
  static const mediumHorizontalPadding = EdgeInsets.symmetric(horizontal: 16.0);
  static const largeHorizontalPadding = EdgeInsets.symmetric(horizontal: 24.0);
  static const xlargeHorizontalPadding = EdgeInsets.symmetric(horizontal: 32.0);
  static const xxlargeHorizontalPadding =
      EdgeInsets.symmetric(horizontal: 48.0);

  static const xxxsmallVerticalPadding = EdgeInsets.symmetric(vertical: 4.0);
  static const xxsmallVerticalPadding = EdgeInsets.symmetric(vertical: 8.0);
  static const smallVerticalPadding = EdgeInsets.symmetric(vertical: 12.0);
  static const mediumVerticalPadding = EdgeInsets.symmetric(vertical: 16.0);
  static const largeVerticalPadding = EdgeInsets.symmetric(vertical: 24.0);
  static const xlargeVerticalPadding = EdgeInsets.symmetric(vertical: 32.0);
  static const xxlargeVerticalPadding = EdgeInsets.symmetric(vertical: 48.0);

  static const xxxsmallAllPadding = EdgeInsets.all(4.0);
  static const xxsmallAllPadding = EdgeInsets.all(8.0);
  static const smallAllPadding = EdgeInsets.all(12.0);
  static const mediumAllPadding = EdgeInsets.all(16.0);
  static const largeAllPadding = EdgeInsets.all(24.0);
  static const xlargeAllPadding = EdgeInsets.all(32.0);
  static const xxlargeAllPadding = EdgeInsets.all(48.0);

  static const xxxsmallTopPadding = EdgeInsets.only(top: 4.0);
  static const xxsmallTopPadding = EdgeInsets.only(top: 8.0);
  static const smallTopPadding = EdgeInsets.only(top: 12.0);
  static const mediumTopPadding = EdgeInsets.only(top: 16.0);
  static const largeTopPadding = EdgeInsets.only(top: 24.0);
  static const xlargeTopPadding = EdgeInsets.only(top: 32.0);
  static const xxlargeTopPadding = EdgeInsets.only(top: 48.0);

  static const xxxsmallBottomPadding = EdgeInsets.only(bottom: 4.0);
  static const xxsmallBottomPadding = EdgeInsets.only(bottom: 8.0);
  static const smallBottomPadding = EdgeInsets.only(bottom: 12.0);
  static const mediumBottomPadding = EdgeInsets.only(bottom: 16.0);
  static const largeBottomPadding = EdgeInsets.only(bottom: 24.0);
  static const xlargeBottomPadding = EdgeInsets.only(bottom: 32.0);
  static const xxlargeBottomPadding = EdgeInsets.only(bottom: 48.0);

  static const xxxsmallLeftPadding = EdgeInsets.only(left: 4.0);
  static const xxsmallLeftPadding = EdgeInsets.only(left: 8.0);
  static const smallLeftPadding = EdgeInsets.only(left: 12.0);
  static const mediumLeftPadding = EdgeInsets.only(left: 16.0);
  static const largeLeftPadding = EdgeInsets.only(left: 24.0);
  static const xlargeLeftPadding = EdgeInsets.only(left: 32.0);
  static const xxlargeLeftPadding = EdgeInsets.only(left: 48.0);

  static const xxxsmallRightPadding = EdgeInsets.only(right: 4.0);
  static const xxsmallRightPadding = EdgeInsets.only(right: 8.0);
  static const smallRightPadding = EdgeInsets.only(right: 12.0);
  static const mediumRightPadding = EdgeInsets.only(right: 16.0);
  static const largeRightPadding = EdgeInsets.only(right: 24.0);
  static const xlargeRightPadding = EdgeInsets.only(right: 32.0);
  static const xxlargeRightPadding = EdgeInsets.only(right: 48.0);

  static const xxxsmallStartPadding = EdgeInsetsDirectional.only(start: 4.0);
  static const xxsmallStartPadding = EdgeInsetsDirectional.only(start: 8.0);
  static const smallStartPadding = EdgeInsetsDirectional.only(start: 12.0);
  static const mediumStartPadding = EdgeInsetsDirectional.only(start: 16.0);
  static const largeStartPadding = EdgeInsetsDirectional.only(start: 24.0);
  static const xlargeStartPadding = EdgeInsetsDirectional.only(start: 32.0);
  static const xxlargeStartPadding = EdgeInsetsDirectional.only(start: 48.0);

  static const xxxsmallEndPadding = EdgeInsetsDirectional.only(end: 4.0);
  static const xxsmallEndPadding = EdgeInsetsDirectional.only(end: 8.0);
  static const smallEndPadding = EdgeInsetsDirectional.only(end: 12.0);
  static const mediumEndPadding = EdgeInsetsDirectional.only(end: 16.0);
  static const largeEndPadding = EdgeInsetsDirectional.only(end: 24.0);
  static const xlargeEndPadding = EdgeInsetsDirectional.only(end: 32.0);
  static const xxlargeEndPadding = EdgeInsetsDirectional.only(end: 48.0);

//Custom SizeBox
  static const SizedBox xxxsmallVGap = SizedBox(height: 4.0);
  static const SizedBox xxsmallVGap = SizedBox(height: 8.0);
  static const SizedBox smallVGap = SizedBox(height: 12.0);
  static const SizedBox mediumVGap = SizedBox(height: 16.0);
  static const SizedBox largeVGap = SizedBox(height: 24.0);
  static const SizedBox xlargeVGap = SizedBox(height: 32.0);
  static const SizedBox xxlargeVGap = SizedBox(height: 48.0);

  static const SizedBox xxxsmallHGap = SizedBox(width: 4.0);
  static const SizedBox xxsmallHGap = SizedBox(width: 8.0);
  static const SizedBox smallHGap = SizedBox(width: 12.0);
  static const SizedBox mediumHGap = SizedBox(width: 16.0);
  static const SizedBox largeHGap = SizedBox(width: 24.0);
  static const SizedBox xlargeHGap = SizedBox(width: 32.0);
  static const SizedBox xxlargeHGap = SizedBox(width: 48.0);

//Custom Icon Sizes
  static const double xxxsmallIconSize = 4.0;
  static const double xxsmallIconSize = 8.0;
  static const double smallIconSize = 12.0;
  static const double mediumIconSize = 16.0;
  static const double largeIconSize = 24.0;
  static const double xlargeIconSize = 32.0;
  static const double xxlargeIconSize = 48.0;

//Custom AppBar Sizes
  static const double smallAppBarSize = 32;
  static const double mediumAppBarSize = 64;
  static const double largeAppBarSize = 80;

//Custom Sizes
  static const double xxxsmallSize = 4.0;
  static const double xxsmallSize = 8.0;
  static const double smallSize = 12.0;
  static const double mediumSize = 16.0;
  static const double largeSize = 24.0;
  static const double xlargeSize = 32.0;
  static const double xxlargeSize = 48.0;

//Custom Label Sizes
  static const double xxxsmallLabelSize = 4.0;
  static const double xxsmallLabelSize = 8.0;
  static const double smallLabelSize = 12.0;
  static const double mediumLabelSize = 16.0;
  static const double largeLabelSize = 24.0;
  static const double xlargeLabelSize = 32.0;
  static const double xxlargeLabelSize = 48.0;

//Custom Radiuses
  static const double xxxsmallRadius = 4;
  static const double xxsmallRadius = 8;
  static const double smallRadius = 12;
  static const double mediumRadius = 16;
  static const double largeRadius = 24;
  static const double xlargeRadius = 32;
  static const double xxlargeRadius = 48;

  static const TextStyle headlineLarge =
      TextStyle(fontSize: MyAppStyles.largeSize);

  static const TextStyle headlineMedium =
      TextStyle(fontSize: MyAppStyles.mediumSize);

  static const TextStyle labelLarge =
      TextStyle(fontSize: MyAppStyles.largeLabelSize);

  static const TextStyle labelMedium =
      TextStyle(fontSize: MyAppStyles.mediumLabelSize);
}

class MyAppTheme {
  static ThemeData dark = ThemeData(
    canvasColor: Colors.transparent,
    scaffoldBackgroundColor: MyAppColors.darkScaffoldBackground,
    colorScheme: ColorScheme.fromSeed(
      brightness: Brightness.dark,
      seedColor: MyAppColors.darkSeedColor,
      primary: MyAppColors.darkPrimary,
      secondary: MyAppColors.darkSecondary,
      tertiary: MyAppColors.darkTertiary,
      surface: MyAppColors.darkBackground,
    ),
    progressIndicatorTheme:
        const ProgressIndicatorThemeData(color: MyAppColors.darkPrimary),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
          shape: const StadiumBorder(),
          elevation: 0,
          shadowColor: Colors.transparent,
          foregroundColor: MyAppColors.darkSurface,
          textStyle: MyAppStyles.elevatedButtonTextStyle.copyWith(
            fontWeight: FontWeight.bold,
            fontSize: MyAppStyles.smallSize,
          )),
    ),
    textTheme: TextTheme(
        headlineLarge: MyAppStyles.headlineLarge,
        headlineMedium: MyAppStyles.headlineMedium,
        labelLarge: MyAppStyles.labelLarge,
        labelMedium: MyAppStyles.labelMedium,
        displayMedium: MyAppStyles.labelMedium.copyWith(
          color: MyAppColors.lightText,
        )),
    drawerTheme: const DrawerThemeData(
      backgroundColor: MyAppColors.darkSeedColor,
      surfaceTintColor: MyAppColors.darkSurface,
    ),
    iconTheme: const IconThemeData(
        size: MyAppStyles.mediumIconSize, color: MyAppColors.darkSecondary),
    snackBarTheme: SnackBarThemeData(
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
        topLeft: Radius.circular(MyAppStyles.mediumRadius),
        topRight: Radius.circular(MyAppStyles.mediumRadius),
      )),
      backgroundColor: MyAppColors.darkText,
      closeIconColor: MyAppColors.darkSurface,
      insetPadding: MyAppStyles.xxsmallAllPadding,
      contentTextStyle: MyAppStyles.labelMedium.copyWith(
        fontWeight: FontWeight.bold,
        color: MyAppColors.darkText,
      ),
    ),
  );

  static ThemeData light = ThemeData(
    canvasColor: Colors.transparent,
    scaffoldBackgroundColor: MyAppColors.lightScaffoldBackground,
    colorScheme: ColorScheme.fromSeed(
      brightness: Brightness.light,
      seedColor: MyAppColors.lightSeedColor,
      primary: MyAppColors.lightPrimary,
      secondary: MyAppColors.lightSecondary,
      tertiary: MyAppColors.lightTertiary,
      surface: MyAppColors.lightBackground,
    ),
    progressIndicatorTheme:
        const ProgressIndicatorThemeData(color: MyAppColors.lightPrimary),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
          shape: const StadiumBorder(),
          elevation: 0,
          foregroundColor: MyAppColors.lightSurface,
          padding: MyAppStyles.mediumAllPadding,
          shadowColor: Colors.transparent,
          textStyle: MyAppStyles.elevatedButtonTextStyle.copyWith(
            fontWeight: FontWeight.bold,
            fontSize: MyAppStyles.smallSize,
          )),
    ),
    textTheme: TextTheme(
        headlineLarge: MyAppStyles.headlineLarge,
        headlineMedium: MyAppStyles.headlineMedium,
        labelLarge: MyAppStyles.labelLarge,
        labelMedium: MyAppStyles.labelMedium,
        displayMedium: MyAppStyles.labelMedium.copyWith(
          color: MyAppColors.darkText,
        )),
    drawerTheme: const DrawerThemeData(
      backgroundColor: MyAppColors.lightSeedColor,
      surfaceTintColor: MyAppColors.lightSurface,
    ),
    iconTheme: const IconThemeData(
        size: MyAppStyles.mediumIconSize, color: MyAppColors.darkSecondary),
    snackBarTheme: SnackBarThemeData(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(MyAppStyles.mediumRadius),
          topRight: Radius.circular(MyAppStyles.mediumRadius),
        ),
      ),
      backgroundColor: MyAppColors.lightPrimary,
      actionTextColor: MyAppColors.lightText,
      closeIconColor: MyAppColors.lightSurface,
      insetPadding: MyAppStyles.xxsmallAllPadding,
      contentTextStyle: MyAppStyles.labelMedium
          .copyWith(fontWeight: FontWeight.bold, color: MyAppColors.lightText),
    ),
  );
}

class MyAppColors {
  static const Color lightSeedColor = Colors.blue;
  static const Color lightPrimary = Colors.lightBlue;
  static const Color lightSecondary = Colors.grey;
  static const Color lightTertiary = Colors.white60;
  static const Color lightBackground = Colors.white;
  static const Color lightScaffoldBackground = Colors.white;
  static const Color lightText = Colors.black;
  static const Color lightSurface = Colors.white;

  static const Color darkSeedColor = Colors.blueAccent;
  static const Color darkPrimary = Colors.blueGrey;
  static const Color darkSecondary = Colors.grey;
  static const Color darkTertiary = Colors.white70;
  static const Color darkBackground = Colors.black;
  static const Color darkScaffoldBackground = Colors.black;
  static const Color darkText = Colors.black;
  static const Color darkSurface = Colors.black;
}