Feature Guide
Design System

Design System Module

The Design System module creates a comprehensive theme management system for your Flutter application, allowing you to easily implement light and dark themes and maintain consistent styling throughout your app.

Generated Structure

lib/core/design_system/
├── app_colors/
│   └── app_colors.dart
├── color_extension/
│   └── app_color_extension.dart
├── font_extension/
│   └── font_extension.dart
└── theme_extension/
    ├── app_theme_extension.dart
    └── theme_manager.dart

Key Components

1. App Colors (app_colors.dart)

This file defines your application's color palette:

class AppColor {
  static const Color textPrimary = Color(0xFF000003);
  static const Color textTertiary = Color(0xFF666666);
  static const Color surfaceCard = Color(0xFFF6F6F7);
  static const Color textHighlightBlue = Color(0xFF0000E5);
  static const Color surface = Color(0xFFF2F2F2);
  static const Color inactiveButton = Color(0xFFD3D3D7);
  static const Color activeButton = Color(0xFF0000E5);
  static const Color activeButtonDark = Color.fromARGB(255, 73, 73, 215);
  static const Color textWhite = Color(0xFFF6F6F7);
  static const Color iconRed = Color(0xFFE50900);
  static const Color iconBlue = Color(0xFF0000E5);
  static const Color buttonTertiary = Color(0xFFCCFF00);
  static const Color buttonSecondary = Color(0xFF141619);
}

2. Color Extension (app_color_extension.dart)

Creates a Flutter ThemeExtension for your colors, enabling you to access them through the theme:

class AppColorExtension extends ThemeExtension<AppColorExtension> {
  const AppColorExtension({
    required this.textPrimary,
    required this.textTertiary,
    required this.surfaceCard,
    required this.textHighlightBlue,
    required this.surface,
    required this.inactiveButton,
    required this.activeButton,
    required this.textWhite,
    required this.iconRed,
    required this.iconBlue,
    required this.buttonTertiary,
    required this.buttonSecondary,
  });
 
  final Color textPrimary;
  final Color textTertiary;
  // Other color properties...
 
  @override
  ThemeExtension<AppColorExtension> copyWith({
    Color? textPrimary,
    Color? textTertiary,
    // Other parameters...
  }) {
    // Implementation...
  }
 
  @override
  ThemeExtension<AppColorExtension> lerp(
    covariant ThemeExtension<AppColorExtension>? other,
    double t,
  ) {
    // Implementation...
  }
}
 
// Extension to create a ColorScheme from AppColorExtension
extension ColorSchemeBuilder on AppColorExtension {
  ColorScheme toColorScheme(Brightness brightness) {
    return ColorScheme(
      brightness: brightness,
      primary: textPrimary,
      onPrimary: textWhite,
      // Other color scheme mappings...
    );
  }
}

3. Font Extension (font_extension.dart)

Similar to color extension, but for typography:

class AppFontThemeExtension extends ThemeExtension<AppFontThemeExtension> {
  const AppFontThemeExtension({
    required this.headerLarger,
    required this.headerSmall,
    required this.subHeader,
    required this.bodyMedium,
  });
 
  final TextStyle headerLarger;
  final TextStyle headerSmall;
  final TextStyle subHeader;
  final TextStyle bodyMedium;
 
  // copyWith and lerp implementations...
}

4. App Theme Extension (app_theme_extension.dart)

Combines colors and fonts to create complete light and dark themes:

class AppTheme {
  static final light = () {
    final defaultTheme = ThemeData.light();
 
    return defaultTheme.copyWith(
      colorScheme: _lightAppColors.toColorScheme(Brightness.light),
      scaffoldBackgroundColor: _lightAppColors.surface,
      appBarTheme: AppBarTheme(
        color: _lightAppColors.surface,
      ),
      extensions: [
        _lightAppColors,
        _lightFontTheme,
      ],
    );
  }();
 
  static final dark = () {
    // Dark theme implementation...
  }();
 
  // Font themes and color definitions...
}
 
// Extension methods for easy access
extension ThemeGetter on BuildContext {
  ThemeData get theme => Theme.of(this);
  TextTheme get textTheme => theme.textTheme;
  ColorScheme get colorScheme => theme.colorScheme;
}
 
extension AppThemeExtension on ThemeData {
  AppColorExtension get colors => extension<AppColorExtension>() ?? AppTheme._lightAppColors;
  AppFontThemeExtension get fonts => extension<AppFontThemeExtension>() ?? AppTheme._lightFontTheme;
}

5. Theme Manager (theme_manager.dart)

Manages theme state with your selected state management solution. The implementation varies based on your chosen state management approach:

BLoC Example:

class ThemeState {
  final ThemeModeEnum themeMode;
  ThemeState(this.themeMode);
}
 
class ThemeCubit extends Cubit<ThemeState> {
  ThemeCubit() : super(ThemeState(ThemeModeEnum.system)) {
    // Initialize from shared preferences
    themeManager.initialize().then((_) {
      emit(ThemeState(themeManager.currentTheme));
    });
 
    // Add listener for theme changes
    themeManager.addListener(_onThemeChanged);
  }
 
  void setTheme(ThemeModeEnum theme) {
    themeManager.setTheme(theme);
  }
 
  void _onThemeChanged(ThemeModeEnum theme) {
    emit(ThemeState(theme));
  }
 
  @override
  Future<void> close() {
    themeManager.removeListener(_onThemeChanged);
    return super.close();
  }
}

How to Use the Design System

Access colors and text styles using the extension methods:

// In a widget
Container(
  color: context.theme.colors.surface,
  child: Text(
    'Hello World',
    style: context.theme.fonts.headerLarger,
  ),
)

Switch themes using your state management solution:

// With BLoC
context.read<ThemeCubit>().setTheme(ThemeModeEnum.dark);
 
// With Provider
context.read<ThemeProvider>().setThemeMode(ThemeModeEnum.dark);
 
// With Riverpod
ref.read(themeProvider.notifier).setThemeMode(ThemeModeEnum.dark);

Customizing the Design System

  1. Modify Color Palette: Edit app_colors.dart to change your app's colors
  2. Update Typography: Modify font definitions in app_theme_extension.dart
  3. Add Custom Styles: Extend the theme extensions with additional properties
  4. Custom Component Themes: Add new theme extensions for specific components

Example: Adding a button styles extension:

// Create a new extension
class ButtonStylesExtension extends ThemeExtension<ButtonStylesExtension> {
  final ButtonStyle primaryButton;
  final ButtonStyle secondaryButton;
  final ButtonStyle textButton;
  
  // Constructor, copyWith, and lerp implementations...
}
 
// Add to your theme
static final light = () {
  final defaultTheme = ThemeData.light();
 
  return defaultTheme.copyWith(
    // Other theme properties...
    extensions: [
      _lightAppColors,
      _lightFontTheme,
      _lightButtonStyles, // Add button styles
    ],
  );
}();
 
// Access in your code
ElevatedButton(
  style: context.theme.extension<ButtonStylesExtension>()?.primaryButton,
  onPressed: () {},
  child: Text('Button'),
)
Firebase SetupPush Notification