feat(mobile): exclude locales from overpass font (#14158)

* feat(mobile): create localeProvider

This provider can be used to refresh providers that provide UI elements
and get cached.

* feat(mobile): use default font for locales not supported by Overpass

* chore(mobile): fix test

* refactor(mobile): use Locale instead of String

mobile/lib/constants/locales.dart

@@ -48,3 +48,8 @@ const Map<String, Locale> locales = {
 };
 
 const String translationsPath = 'assets/i18n';
+
+const List<Locale> localesNotSupportedByOverpass = [
+  Locale('el', 'GR'),
+  Locale('sr', 'Cyrl'),
+];

mobile/lib/main.dart

@@ -10,6 +10,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_displaymode/flutter_displaymode.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/locale_provider.dart';
 import 'package:immich_mobile/utils/download.dart';
 import 'package:intl/date_symbol_data_local.dart';
 import 'package:timezone/data/latest.dart';
@@ -212,20 +213,31 @@ class ImmichAppState extends ConsumerState<ImmichApp>
     final router = ref.watch(appRouterProvider);
     final immichTheme = ref.watch(immichThemeProvider);
 
-    return MaterialApp(
+    return ProviderScope(
-      localizationsDelegates: context.localizationDelegates,
+      overrides: [
-      supportedLocales: context.supportedLocales,
+        localeProvider.overrideWithValue(context.locale),
-      locale: context.locale,
+      ],
-      debugShowCheckedModeBanner: true,
+      child: MaterialApp(
-      home: MaterialApp.router(
+        localizationsDelegates: context.localizationDelegates,
-        title: 'Immich',
+        supportedLocales: context.supportedLocales,
-        debugShowCheckedModeBanner: false,
+        locale: context.locale,
-        themeMode: ref.watch(immichThemeModeProvider),
+        debugShowCheckedModeBanner: true,
-        darkTheme: getThemeData(colorScheme: immichTheme.dark),
+        home: MaterialApp.router(
-        theme: getThemeData(colorScheme: immichTheme.light),
+          title: 'Immich',
-        routeInformationParser: router.defaultRouteParser(),
+          debugShowCheckedModeBanner: false,
-        routerDelegate: router.delegate(
+          themeMode: ref.watch(immichThemeModeProvider),
-          navigatorObservers: () => [TabNavigationObserver(ref: ref)],
+          darkTheme: getThemeData(
+            colorScheme: immichTheme.dark,
+            locale: context.locale,
+          ),
+          theme: getThemeData(
+            colorScheme: immichTheme.light,
+            locale: context.locale,
+          ),
+          routeInformationParser: router.defaultRouteParser(),
+          routerDelegate: router.delegate(
+            navigatorObservers: () => [TabNavigationObserver(ref: ref)],
+          ),
         ),
       ),
     );

mobile/lib/providers/locale_provider.dart

@@ -0,0 +1,4 @@
+import 'package:flutter/widgets.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+final localeProvider = Provider<Locale>((_) => throw UnimplementedError());

mobile/lib/utils/immich_app_theme.dart

@@ -2,6 +2,7 @@ import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/constants/locales.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -145,7 +146,18 @@ ImmichTheme _decolorizeSurfaces({
   );
 }
 
-ThemeData getThemeData({required ColorScheme colorScheme}) {
+String? getFontFamilyFromLocale(Locale locale) {
+  if (localesNotSupportedByOverpass.contains(locale)) {
+    // Let Flutter use the default font
+    return null;
+  }
+  return 'Overpass';
+}
+
+ThemeData getThemeData({
+  required ColorScheme colorScheme,
+  required Locale locale,
+}) {
   var isDark = colorScheme.brightness == Brightness.dark;
   var primaryColor = colorScheme.primary;
 
@@ -163,10 +175,10 @@ ThemeData getThemeData({required ColorScheme colorScheme}) {
     bottomSheetTheme: BottomSheetThemeData(
       backgroundColor: colorScheme.surfaceContainer,
     ),
-    fontFamily: 'Overpass',
+    fontFamily: getFontFamilyFromLocale(locale),
     snackBarTheme: SnackBarThemeData(
       contentTextStyle: TextStyle(
-        fontFamily: 'Overpass',
+        fontFamily: getFontFamilyFromLocale(locale),
         color: primaryColor,
         fontWeight: FontWeight.bold,
       ),
@@ -175,7 +187,7 @@ ThemeData getThemeData({required ColorScheme colorScheme}) {
     appBarTheme: AppBarTheme(
       titleTextStyle: TextStyle(
         color: primaryColor,
-        fontFamily: 'Overpass',
+        fontFamily: getFontFamilyFromLocale(locale),
         fontWeight: FontWeight.bold,
         fontSize: 18,
       ),

mobile/lib/widgets/map/map_theme_override.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/locale_provider.dart';
 import 'package:immich_mobile/providers/map/map_state.provider.dart';
 import 'package:immich_mobile/utils/immich_app_theme.dart';
 
@@ -71,6 +72,7 @@ class _MapThemeOverideState extends ConsumerState<MapThemeOveride>
     _theme = widget.themeMode ??
         ref.watch(mapStateNotifierProvider.select((v) => v.themeMode));
     var appTheme = ref.watch(immichThemeProvider);
+    final locale = ref.watch(localeProvider);
 
     useValueChanged<ThemeMode, void>(_theme, (_, __) {
       if (_theme == ThemeMode.system) {
@@ -85,8 +87,8 @@ class _MapThemeOverideState extends ConsumerState<MapThemeOveride>
 
     return Theme(
       data: _isDarkTheme
-          ? getThemeData(colorScheme: appTheme.dark)
+          ? getThemeData(colorScheme: appTheme.dark, locale: locale)
-          : getThemeData(colorScheme: appTheme.light),
+          : getThemeData(colorScheme: appTheme.light, locale: locale),
       child: widget.mapBuilder.call(
         ref.watch(
           mapStateNotifierProvider.select(

mobile/test/modules/map/map_theme_override_test.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/models/map/map_state.model.dart';
+import 'package:immich_mobile/providers/locale_provider.dart';
 import 'package:immich_mobile/providers/map/map_state.provider.dart';
 import 'package:immich_mobile/widgets/map/map_theme_override.dart';
 
@@ -24,7 +25,10 @@ void main() {
   setUp(() {
     mapState = MapState(themeMode: ThemeMode.dark);
     mapStateNotifier = MockMapStateNotifier(mapState);
-    overrides = [mapStateNotifierProvider.overrideWith(() => mapStateNotifier)];
+    overrides = [
+      mapStateNotifierProvider.overrideWith(() => mapStateNotifier),
+      localeProvider.overrideWithValue(Locale("en")),
+    ];
   });
 
   testWidgets("Return dark theme style when theme mode is dark",