replace bloc with watch_it

2024-05-10 02:00:00 +05:30
parent aa5673bae3
commit fb6253d2d1
29 changed files with 663 additions and 239 deletions
@@ -0,0 +1,30 @@
+import 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:immich_mobile/domain/models/app_setting.model.dart';
+import 'package:immich_mobile/domain/services/app_setting.service.dart';
+import 'package:immich_mobile/presentation/theme/utils/colors.dart';
+
+class AppThemeState extends ValueNotifier<AppTheme> {
+  final AppSettingsService _appSettings;
+  StreamSubscription? _appSettingSubscription;
+
+  AppThemeState({required AppSettingsService appSettings})
+      : _appSettings = appSettings,
+        super(AppTheme.blue);
+
+  void init() {
+    _appSettingSubscription =
+        _appSettings.watchSetting(AppSettings.appTheme).listen((themeIndex) {
+      final theme =
+          AppTheme.values.elementAtOrNull(themeIndex) ?? AppTheme.blue;
+      value = theme;
+    });
+  }
+
+  @override
+  void dispose() {
+    _appSettingSubscription?.cancel();
+    return super.dispose();
+  }
+}
@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+
+enum AppTheme {
+  blue(AppColors._blueLight, AppColors._blueDark),
+  // Fallback color for dynamic theme for non-supported platforms
+  dynamic(AppColors._blueLight, AppColors._blueDark);
+
+  final ColorScheme lightSchema;
+  final ColorScheme darkSchema;
+
+  const AppTheme(this.lightSchema, this.darkSchema);
+}
+
+class AppColors {
+  const AppColors();
+
+  /// Blue color
+  static const ColorScheme _blueLight = ColorScheme(
+    brightness: Brightness.light,
+    primary: Color(0xff1565c0),
+    onPrimary: Color(0xffffffff),
+    primaryContainer: Color(0xffd6e3ff),
+    onPrimaryContainer: Color(0xff001b3d),
+    secondary: Color(0xff3277d2),
+    onSecondary: Color(0xfffdfbff),
+    secondaryContainer: Color(0xffecf0ff),
+    onSecondaryContainer: Color(0xff001b3d),
+    tertiary: Color(0xff7b4d88),
+    onTertiary: Color(0xfffffbff),
+    tertiaryContainer: Color(0xfffad7ff),
+    onTertiaryContainer: Color(0xff310540),
+    error: Color(0xffba1a1a),
+    onError: Color(0xfffffbff),
+    errorContainer: Color(0xffffdad6),
+    onErrorContainer: Color(0xff410002),
+    background: Color(0xfffcfafe),
+    onBackground: Color(0xff191c20),
+    surface: Color(0xfffdfbff),
+    onSurface: Color(0xff191c20),
+    surfaceVariant: Color(0xffdfe2ef),
+    onSurfaceVariant: Color(0xff424751),
+    outline: Color(0xff737782),
+    outlineVariant: Color(0xffc2c6d2),
+    shadow: Color(0xff000000),
+    scrim: Color(0xff000000),
+    inverseSurface: Color(0xff2e3036),
+    onInverseSurface: Color(0xfff0f0f7),
+    inversePrimary: Color(0xffa9c7ff),
+    surfaceTint: Color(0xff00468c),
+  );
+
+  static const ColorScheme _blueDark = ColorScheme(
+    brightness: Brightness.dark,
+    primary: Color(0xffa9c7ff),
+    onPrimary: Color(0xff001b3d),
+    primaryContainer: Color(0xff00468c),
+    onPrimaryContainer: Color(0xffd6e3ff),
+    secondary: Color(0xffd6e3ff),
+    onSecondary: Color(0xff001b3d),
+    secondaryContainer: Color(0xff003063),
+    onSecondaryContainer: Color(0xffd6e3ff),
+    tertiary: Color(0xffeab4f6),
+    onTertiary: Color(0xff310540),
+    tertiaryContainer: Color(0xff61356e),
+    onTertiaryContainer: Color(0xfffad7ff),
+    error: Color(0xffffb4ab),
+    onError: Color(0xff410002),
+    errorContainer: Color(0xff93000a),
+    onErrorContainer: Color(0xffffb4ab),
+    background: Color(0xff1a1d21),
+    onBackground: Color(0xffe2e2e9),
+    surface: Color(0xff1a1e22),
+    onSurface: Color(0xffe2e2e9),
+    surfaceVariant: Color(0xff424852),
+    onSurfaceVariant: Color(0xffc2c6d2),
+    outline: Color(0xff8c919c),
+    outlineVariant: Color(0xff424751),
+    shadow: Color(0xff000000),
+    scrim: Color(0xff000000),
+    inverseSurface: Color(0xffe1e1e9),
+    onInverseSurface: Color(0xff2e3036),
+    inversePrimary: Color(0xff005db7),
+    surfaceTint: Color(0xffa9c7ff),
+  );
+
+  static ThemeData getThemeForColorScheme(ColorScheme color) {
+    return ThemeData(
+      primaryColor: color.primary,
+      iconTheme: const IconThemeData(weight: 400),
+    );
+  }
+}
@@ -0,0 +1,39 @@
+import 'package:dynamic_color/dynamic_color.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/presentation/theme/utils/colors.dart';
+
+class AppThemeBuilder extends StatelessWidget {
+  const AppThemeBuilder({
+    super.key,
+    required this.theme,
+    required this.builder,
+  });
+
+  /// Current app theme to switch the theme data used
+  final AppTheme theme;
+
+  /// Builds the child widget of this widget, providing a light and dark [ThemeData] based on the
+  /// [theme] passed.
+  final Widget Function(ThemeData lightTheme, ThemeData darkTheme) builder;
+
+  @override
+  Widget build(BuildContext context) {
+    // Static colors
+    if (theme != AppTheme.dynamic) {
+      final lightTheme = AppColors.getThemeForColorScheme(theme.lightSchema);
+      final darkTheme = AppColors.getThemeForColorScheme(theme.darkSchema);
+
+      return builder(lightTheme, darkTheme);
+    }
+
+    // Dynamic color builder
+    return DynamicColorBuilder(builder: (lightDynamic, darkDynamic) {
+      final lightTheme =
+          AppColors.getThemeForColorScheme(lightDynamic ?? theme.lightSchema);
+      final darkTheme =
+          AppColors.getThemeForColorScheme(darkDynamic ?? theme.darkSchema);
+
+      return builder(lightTheme, darkTheme);
+    });
+  }
+}