الفصل التاسع: الواجهة والثيمات Chapter 09: UI Theming & Responsiveness

final class AppTheme {
  // Light Mode Build
  static ThemeData get lightTheme => _build(Brightness.light, _lightExtension);

  // Dark Mode Build
  static ThemeData get darkTheme => _build(Brightness.dark, _darkExtension);

  static ThemeData _build(Brightness brightness, AppColorsExtension ext) {
    final ColorScheme cs = ColorScheme.fromSeed(
      seedColor: ext.primary,
      brightness: brightness,
    );
    // ... Returns ThemeData with full Material 3 configuration
  }
}

class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
  final Color income;   // Emerald Green
  final Color expense;  // Coral Red
  final Color surfaceCard;
  final LinearGradient masterBalanceGradient;
  // ... copyWith and lerp logic
}

extension BuildContextExtension on BuildContext {
  AppColorsExtension get colors => Theme.of(this).extension<AppColorsExtension>()!;
  TextTheme get textTheme => Theme.of(this).textTheme;
  ColorScheme get colorScheme => Theme.of(this).colorScheme;
}

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > AppSizes.tabletBreakpoint) {
          return desktopBody;
        } else if (constraints.maxWidth >= AppSizes.mobileBreakpoint) {
          return tabletBody;
        } else {
          return mobileBody;
        }
      },
    );
  }
}

static Future<T?> showAdaptiveModal<T>(BuildContext context, {required Widget child}) {
  if (ResponsiveLayout.isMobile(context)) {
    return _showMobileSheet(context, child: child);
  }
  return _showDesktopDialog(context, child: child);
}

BlocBuilder<AppSettingsCubit, AppSettingsState>(
  builder: (context, state) {
    return MaterialApp(
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      themeMode: state.themeMode,
      // ...
    );
  },
)

textTheme: TextTheme(
  displayLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
  titleMedium: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
  bodyMedium: TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
),