feat: add theme extensions

catalog/gallery/lib/catalog/catalog_app_colors_screen.dart

@@ -11,7 +11,6 @@ class CatalogAppColorsScreen extends StatelessWidget {
   Widget build(BuildContext context) => CatalogScaffold(
         title: 'COLORS',
         child: ListView.separated(
-          shrinkWrap: true,
           separatorBuilder: (BuildContext context, int index) =>
               const Divider(),
           itemCount: _CatalogColors.values.length,
@@ -56,15 +55,15 @@ extension _CatalogScreenExtensions on _CatalogColors {
       case _CatalogColors.secondary:
         return context.theme.colors.secondary;
       case _CatalogColors.success:
-        return context.theme.colors.success;
+        return context.theme.customColors.success!;
       case _CatalogColors.info:
-        return context.theme.colors.info;
+        return context.theme.customColors.info!;
       case _CatalogColors.warning:
-        return context.theme.colors.warning;
+        return context.theme.customColors.warning!;
       case _CatalogColors.danger:
-        return context.theme.colors.danger;
+        return context.theme.customColors.danger!;
       case _CatalogColors.text:
-        return context.theme.colors.textColor;
+        return context.theme.customColors.textColor!;
     }
   }
 }

catalog/gallery/lib/catalog/catalog_app_text_fields_screen.dart

@@ -21,45 +21,45 @@ class _CatalogTextFieldsScreenState extends State<CatalogTextFieldsScreen> {
 
   @override
   Widget build(BuildContext context) => CatalogScaffold(
-      title: 'TEXT FIELDS',
-      child: Container(
-        margin: const EdgeInsets.all(20),
-        child: Column(
-          children: [
-            AppTextField(
-              controller: labelTextController,
-              labelText: 'Label',
-              helperText: 'Helper text',
-              hintText: 'Text',
-              suffixIcon: Icon(
-                Icons.close,
-                color: context.theme.colors.textColor.shade200,
+        title: 'TEXT FIELDS',
+        child: Container(
+          margin: const EdgeInsets.all(20),
+          child: Column(
+            children: [
+              AppTextField(
+                controller: labelTextController,
+                labelText: 'Label',
+                helperText: 'Helper text',
+                hintText: 'Text',
+                suffixIcon: Icon(
+                  Icons.close,
+                  color: context.theme.customColors.textColor!.shade200,
+                ),
+                prefixIcon: Icon(
+                  Icons.close,
+                  color: context.theme.customColors.textColor!.shade200,
+                ),
+                keyboardType: TextInputType.emailAddress,
               ),
-              prefixIcon: Icon(
-                Icons.close,
-                color: context.theme.colors.textColor.shade200,
+              SizedBox(height: 10.h),
+              AppTextField(
+                keyboardType: TextInputType.multiline,
+                controller: textAreaTextController,
+                maxLength: 100,
+                labelText: 'Label',
+                hintText: 'Text',
+                currentLength: _characterCount,
+                onChange: (value) {
+                  setState(() {
+                    _characterCount = value.length;
+                  });
+                },
+                minLines: 8,
+                maxLines: 10,
               ),
-              keyboardType: TextInputType.emailAddress,
-            ),
-            SizedBox(height: 10.h),
-            AppTextField(
-              keyboardType: TextInputType.multiline,
-              controller: textAreaTextController,
-              maxLength: 100,
-              labelText: 'Label',
-              hintText: 'Text',
-              currentLength: _characterCount,
-              onChange: (value) {
-                setState(() {
-                  _characterCount = value.length;
-                });
-              },
-              minLines: 8,
-              maxLines: 10,
-            ),
-            SizedBox(height: 10.h),
-          ],
+              SizedBox(height: 10.h),
+            ],
+          ),
         ),
-      ),
-    );
+      );
 }

catalog/gallery/lib/catalog/catalog_app_typography_screen.dart

@@ -23,9 +23,9 @@ class CatalogAppTypographyScreen extends StatelessWidget {
                   child: Center(
                     child: Text(
                       element.name.toUpperCase(),
-                      style: element
-                          .textStyle(context)
-                          .copyWith(color: context.theme.colors.textColor),
+                      style: element.textStyle(context).copyWith(
+                            color: context.theme.customColors.textColor,
+                          ),
                     ),
                   ),
                 ),
@@ -76,17 +76,17 @@ extension _CatalogScreenExtensions on _CatalogTypography {
       case _CatalogTypography.bodySmall:
         return context.theme.textStyles.bodySmall!;
       case _CatalogTypography.bodyXSmall:
-        return context.theme.textStyles.bodyXSmall;
+        return context.theme.customTextStyles.bodyXSmall;
       case _CatalogTypography.buttonXSmall:
-        return context.theme.textStyles.buttonXSmall;
+        return context.theme.customTextStyles.buttonXSmall;
       case _CatalogTypography.buttonLarge:
-        return context.theme.textStyles.buttonLarge;
+        return context.theme.customTextStyles.buttonLarge;
       case _CatalogTypography.buttonMedium:
-        return context.theme.textStyles.buttonMedium;
+        return context.theme.customTextStyles.buttonMedium;
       case _CatalogTypography.buttonSmall:
-        return context.theme.textStyles.buttonSmall;
+        return context.theme.customTextStyles.buttonSmall;
       case _CatalogTypography.buttonXLarge:
-        return context.theme.textStyles.buttonXLarge;
+        return context.theme.customTextStyles.buttonXLarge;
     }
   }
 }

catalog/gallery/lib/catalog/catalog_scaffold_screen.dart

@@ -28,6 +28,7 @@ class CatalogScaffold extends StatelessWidget {
               : null,
           title: Text(title),
         ),
+        backgroundColor: context.theme.customColors.textColor!.shade100,
         body: SafeArea(
           child: Padding(
             padding: const EdgeInsets.all(8.0),

catalog/lib/catalog.dart

@@ -1,6 +1,6 @@
 library catalog;
 
-export 'theme/app_colors.dart';
+export 'theme/custom_colors.dart';
 export 'theme/app_text_styles.dart';
 export 'theme/app_dimensions.dart';
 export 'theme/app_theme.dart';

catalog/lib/common/helper.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+Color? getMaterialStatesColor(
+  Set<MaterialState> states,
+  Color baseColor, [
+  Color? customDisabledColor,
+  Color? defaultColor,
+  Color? customHoveredColor,
+  Color? customFocusedColor,
+]) {
+  if (states.contains(MaterialState.pressed)) {
+    return baseColor;
+  }
+  if (states.contains(MaterialState.disabled)) {
+    return customDisabledColor;
+  }
+  if (states.contains(MaterialState.hovered)) {
+    return customHoveredColor;
+  }
+  if (states.contains(MaterialState.focused)) {
+    return customFocusedColor;
+  }
+  return defaultColor ?? Colors.transparent;
+}

catalog/lib/theme/app_buttons.dart

@@ -1,7 +1,9 @@
-import 'package:catalog/theme/app_text_styles.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
-import 'package:catalog/theme/app_colors.dart';
+import 'package:catalog/theme/app_color_scheme.dart';
+import 'package:catalog/theme/custom_colors.dart';
+import 'package:catalog/theme/custom_text_styles.dart';
+import 'package:catalog/common/helper.dart';
 
 typedef StrokeButton = OutlinedButton;
 typedef GhostButton = TextButton;
@@ -23,9 +25,9 @@ final _appFilledButton = FilledButton.styleFrom(
   shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(16.r),
   ),
-  textStyle: AppTextStyles.getAppStyles().buttonLarge,
+  textStyle: CustomTextStyles.getCustomTextStyles().buttonLarge,
   elevation: 0.0,
-  foregroundColor: AppColors.getColorScheme().textColor.shade100,
+  foregroundColor: CustomColors.getCustomColors().textColor!.shade100,
 );
 
 final _appOutlineButton = OutlinedButton.styleFrom(
@@ -34,99 +36,77 @@ final _appOutlineButton = OutlinedButton.styleFrom(
   ),
   side: BorderSide(
     width: 2,
-    color: AppColors.getColorScheme().primary,
+    color: AppColorScheme.getDefaultColorScheme().primary,
   ),
-  textStyle: AppTextStyles.getAppStyles().buttonLarge,
+  textStyle: CustomTextStyles.getCustomTextStyles().buttonLarge,
   elevation: 0.0,
 );
 
 final _appTextButton = TextButton.styleFrom(
   shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.r)),
-  textStyle: AppTextStyles.getAppStyles().buttonLarge,
+  textStyle: CustomTextStyles.getCustomTextStyles().buttonLarge,
   elevation: 0.0,
 );
 
 final _appSecondaryFilledButton = _appFilledButton.copyWith(
   backgroundColor: MaterialStateProperty.resolveWith<Color?>(
-    (Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
-        return AppColors.getColorScheme().textColor.shade500;
-      }
-      if (states.contains(MaterialState.disabled)) {
-        return AppColors.getColorScheme().surface.shade500;
-      }
-      if (states.contains(MaterialState.hovered)) {
-        return AppColors.getColorScheme().onSurface.shade400;
-      }
-      if (states.contains(MaterialState.focused)) {
-        return AppColors.getColorScheme().textColor.shade400;
-      }
-      return AppColors.getColorScheme().textColor.shade300;
-    },
+    (Set<MaterialState> states) => getMaterialStatesColor(
+      states,
+      CustomColors.getCustomColors().textColor!.shade500!,
+      AppColorScheme.getDefaultColorScheme().surface.shade500,
+      AppColorScheme.getDefaultColorScheme().onSurface.shade400,
+      CustomColors.getCustomColors().textColor!.shade400,
+      CustomColors.getCustomColors().textColor!.shade300,
+    ),
   ),
   foregroundColor: MaterialStateProperty.resolveWith<Color?>(
-    (Set<MaterialState> states) =>
-        AppColors.getColorScheme().textColor.shade100,
+    (Set<MaterialState> states) => getMaterialStatesColor(
+      states,
+      CustomColors.getCustomColors().textColor!.shade100!,
+    ),
   ),
 );
 
 final _appSecondaryOutlineButton = _appOutlineButton.copyWith(
   backgroundColor: MaterialStateProperty.resolveWith<Color?>(
-    (Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
-        return AppColors.getColorScheme().surface.shade400;
-      }
-      if (states.contains(MaterialState.disabled)) {
-        return AppColors.getColorScheme().surface.shade500;
-      }
-      if (states.contains(MaterialState.hovered)) {
-        return AppColors.getColorScheme().surface.shade300;
-      }
-      if (states.contains(MaterialState.focused)) {
-        return AppColors.getColorScheme().surface.shade300;
-      }
-      return Colors.transparent;
-    },
+    (Set<MaterialState> states) => getMaterialStatesColor(
+      states,
+      AppColorScheme.getDefaultColorScheme().surface.shade400,
+      AppColorScheme.getDefaultColorScheme().surface.shade500,
+      AppColorScheme.getDefaultColorScheme().surface.shade300,
+      AppColorScheme.getDefaultColorScheme().surface.shade300,
+    ),
   ),
   foregroundColor: MaterialStateProperty.resolveWith<Color?>(
-    (Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
-        return AppColors.getColorScheme().textColor.shade500;
-      }
-      return AppColors.getColorScheme().textColor.shade300;
-    },
+    (Set<MaterialState> states) => getMaterialStatesColor(
+      states,
+      CustomColors.getCustomColors().textColor!.shade500!,
+      null,
+      CustomColors.getCustomColors().textColor!.shade300,
+    ),
   ),
   side: MaterialStateProperty.resolveWith<BorderSide?>(
     (Set<MaterialState> states) => BorderSide(
-      color: AppColors.getColorScheme().textColor.shade300,
+      color: CustomColors.getCustomColors().textColor!.shade300!,
     ),
   ),
 );
 
 final _appSecondaryTextButton = _appTextButton.copyWith(
   backgroundColor: MaterialStateProperty.resolveWith<Color?>(
-    (Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
-        return AppColors.getColorScheme().surface.shade300;
-      }
-      if (states.contains(MaterialState.disabled)) {
-        return AppColors.getColorScheme().surface.shade500;
-      }
-      if (states.contains(MaterialState.hovered)) {
-        return AppColors.getColorScheme().surface.shade200;
-      }
-      if (states.contains(MaterialState.focused)) {
-        return AppColors.getColorScheme().surface.shade200;
-      }
-      return Colors.transparent;
-    },
+    (Set<MaterialState> states) => getMaterialStatesColor(
+      states,
+      AppColorScheme.getDefaultColorScheme().surface.shade300,
+      AppColorScheme.getDefaultColorScheme().surface.shade500,
+      AppColorScheme.getDefaultColorScheme().surface.shade200,
+      AppColorScheme.getDefaultColorScheme().surface.shade200,
+    ),
   ),
   foregroundColor: MaterialStateProperty.resolveWith<Color?>(
-    (Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
-        return AppColors.getColorScheme().textColor.shade500;
-      }
-      return AppColors.getColorScheme().textColor.shade300;
-    },
+    (Set<MaterialState> states) => getMaterialStatesColor(
+      states,
+      CustomColors.getCustomColors().textColor!.shade500!,
+      CustomColors.getCustomColors().textColor!.shade300!,
+    ),
   ),
 );