Add automatic material you theme for digital clock widget

vicolo-dev · Jan 10, 2025 · 457966f · 457966f
1 parent 1c7318a
commit 457966f
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 32 deletions.
diff --git a/lib/common/widgets/card_container.dart b/lib/common/widgets/card_container.dart
@@ -1,5 +1,4 @@
 import 'package:clock_app/common/logic/card_decoration.dart';
-import 'package:clock_app/settings/data/settings_schema.dart';
 import 'package:clock_app/theme/types/theme_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:clock_app/common/utils/color.dart';
@@ -14,12 +13,12 @@ TonalPalette toTonalPalette(int value) {
 Color getCardColor(BuildContext context, [Color? color]) {
   ThemeData theme = Theme.of(context);
   ColorScheme colorScheme = theme.colorScheme;
-  ThemeSettingExtension themeStyle = theme.extension<ThemeSettingExtension>()!;
+  ThemeSettingExtension? themeStyle = theme.extension<ThemeSettingExtension>();
 
   TonalPalette tonalPalette = toTonalPalette(colorScheme.surface.value);
 
   return color ??
-      (themeStyle.useMaterialYou
+      (themeStyle != null && themeStyle.useMaterialYou
           ? Color(tonalPalette
               .get(Theme.of(context).brightness == Brightness.light ? 96 : 15))
           : colorScheme.surface);

diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -775,5 +775,8 @@
   "arabicNumeral": "Arabic",
   "showDigitalClock": "Show digital clock",
   "backgroundServiceIntervalSetting": "Background service interval",
-  "backgroundServiceIntervalSettingDescription": "Lower interval will help keep the app alive, at the cost of some battery life"
+  "backgroundServiceIntervalSettingDescription": "Lower interval will help keep the app alive, at the cost of some battery life",
+  "custom": "Custom",
+  "app": "App",
+  "materialYou": "Material You"
 }
diff --git a/lib/navigation/screens/nav_scaffold.dart b/lib/navigation/screens/nav_scaffold.dart
@@ -14,9 +14,11 @@ import 'package:clock_app/settings/data/general_settings_schema.dart';
 import 'package:clock_app/settings/data/settings_schema.dart';
 import 'package:clock_app/settings/screens/settings_group_screen.dart';
 import 'package:clock_app/settings/types/setting.dart';
+import 'package:clock_app/settings/types/setting_group.dart';
 import 'package:clock_app/system/logic/handle_intents.dart';
 import 'package:clock_app/system/logic/quick_actions.dart';
 import 'package:clock_app/theme/types/theme_extension.dart';
+import 'package:clock_app/widgets/logic/update_widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
@@ -68,6 +70,7 @@ class _NavScaffoldState extends State<NavScaffold> {
   late int _selectedTabIndex;
   late Setting swipeActionSetting;
   late Setting showForegroundSetting;
+  ThemeData? _oldTheme;
   late StreamSubscription _sub;
   late PageController _controller;
   QuickActionController quickActionController = QuickActionController();
@@ -93,10 +96,21 @@ class _NavScaffoldState extends State<NavScaffold> {
     });
   }
 
-  void update(dynamic value) {
+  void _uupdate(dynamic value) {
     setState(() {});
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    final currentTheme = Theme.of(context);
+    if (_oldTheme != currentTheme) {
+      setDigitalClockWidgetData(context);
+      _oldTheme = currentTheme;
+    }
+  }
+
   _showNextScheduleSnackBar(Alarm alarm) {
     Future.delayed(Duration.zero).then((value) {
       ScaffoldMessenger.of(context).removeCurrentSnackBar();
@@ -164,7 +178,7 @@ class _NavScaffoldState extends State<NavScaffold> {
         .getGroup("General")
         .getGroup("Reliability")
         .getSetting("Show Foreground Notification");
-    swipeActionSetting.addListener(update);
+    swipeActionSetting.addListener(_uupdate);
     showForegroundSetting.addListener(_updateForegroundNotification);
     _controller = PageController(initialPage: widget.initialTabIndex);
     _selectedTabIndex = widget.initialTabIndex;
@@ -174,7 +188,7 @@ class _NavScaffoldState extends State<NavScaffold> {
 
   @override
   void dispose() {
-    swipeActionSetting.removeListener(update);
+    swipeActionSetting.removeListener(_uupdate);
     showForegroundSetting.removeListener(_updateForegroundNotification);
     _sub.cancel();
     _controller.dispose();
@@ -205,7 +219,7 @@ class _NavScaffoldState extends State<NavScaffold> {
                 titleWidget: Text(
                   tabs[_selectedTabIndex].title,
                   style: textTheme.titleMedium?.copyWith(
-                    color: colorScheme.onBackground.withOpacity(0.6),
+                    color: colorScheme.onSurface.withOpacity(0.6),
                   ),
                 ),
                 systemNavBarColor:
@@ -222,7 +236,7 @@ class _NavScaffoldState extends State<NavScaffold> {
                     },
                     icon: const Icon(FluxIcons.settings,
                         semanticLabel: "Settings"),
-                    color: colorScheme.onBackground.withOpacity(0.8),
+                    color: colorScheme.onSurface.withOpacity(0.8),
                   ),
                 ],
               )
@@ -263,7 +277,7 @@ class _NavScaffoldState extends State<NavScaffold> {
                   ],
                   leading: Text(tabs[_selectedTabIndex].title,
                       style: textTheme.headlineSmall?.copyWith(
-                        color: colorScheme.onBackground.withOpacity(0.6),
+                        color: colorScheme.onSurface.withOpacity(0.6),
                       )),
                   trailing: IconButton(
                     onPressed: () {
@@ -276,7 +290,7 @@ class _NavScaffoldState extends State<NavScaffold> {
                     },
                     icon: const Icon(FluxIcons.settings,
                         semanticLabel: "Settings"),
-                    color: colorScheme.onBackground.withOpacity(0.8),
+                    color: colorScheme.onSurface.withOpacity(0.8),
                   ),
                   selectedIndex: _selectedTabIndex,
                   onDestinationSelected: _onTabSelected,

diff --git a/lib/theme/data/appearance_settings_schema.dart b/lib/theme/data/appearance_settings_schema.dart
@@ -12,7 +12,6 @@ import 'package:clock_app/theme/utils/color_scheme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
-
 SettingGroup appearanceSettingsSchema = SettingGroup(
   "Appearance",
   (context) => AppLocalizations.of(context)!.appearanceSettingGroup,

diff --git a/lib/widgets/data/widget_settings_schema.dart b/lib/widgets/data/widget_settings_schema.dart
@@ -1,3 +1,4 @@
+import 'package:clock_app/settings/data/settings_schema.dart';
 import 'package:clock_app/settings/types/setting.dart';
 import 'package:clock_app/settings/types/setting_enable_condition.dart';
 import 'package:clock_app/settings/types/setting_group.dart';
@@ -6,6 +7,11 @@ import 'package:clock_app/widgets/logic/update_widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
+enum ColorSchemeType {
+  custom,
+  app,
+}
+
 SettingGroup widgetSettingSchema = SettingGroup(
   "Widgets",
   (context) => AppLocalizations.of(context)!.widgetsSettingGroup,
@@ -14,6 +20,31 @@ SettingGroup widgetSettingSchema = SettingGroup(
       "Digital Clock",
       (context) => AppLocalizations.of(context)!.digitalClockSettingGroup,
       [
+        SelectSetting(
+          "colorScheme",
+          (context) => AppLocalizations.of(context)!.colorSchemeSetting,
+          [
+            SelectSettingOption(
+                (context) => AppLocalizations.of(context)!.custom,
+                ColorSchemeType.custom),
+            SelectSettingOption((context) => AppLocalizations.of(context)!.app,
+                ColorSchemeType.app),
+          ],
+          onChange: (context, value) async {
+            if (value > 0) {
+              appSettings
+                  .getGroup('Widgets')
+                  .getGroup('Digital Clock')
+                  .getGroup('background')
+                  .getSetting('backgroundOpacity')
+                  .setValue(context, 100.0);
+              await appSettings.save();
+            }
+            if (context.mounted) {
+              setDigitalClockWidgetData(context);
+            }
+          },
+        ),
         SettingGroup(
           "Layout",
           (context) => AppLocalizations.of(context)!.layoutSettingGroup,
@@ -88,7 +119,9 @@ SettingGroup widgetSettingSchema = SettingGroup(
               70,
               enableConditions: [
                 GeneralCondition(
-                    () => (androidInfo?.version.sdkInt ?? 34) >= 26)
+                    () => (androidInfo?.version.sdkInt ?? 34) >= 26),
+                // ValueCondition(["..", "colorScheme"],
+                // (value) => value == ColorSchemeType.custom)
               ],
 
               onChange: (context, value) async {

diff --git a/lib/widgets/logic/update_widgets.dart b/lib/widgets/logic/update_widgets.dart
@@ -1,17 +1,25 @@
 import 'package:clock_app/common/utils/time_format.dart';
+import 'package:clock_app/common/widgets/card_container.dart';
 import 'package:clock_app/developer/logic/logger.dart';
 import 'package:clock_app/settings/data/settings_schema.dart';
+import 'package:clock_app/widgets/data/widget_settings_schema.dart';
 import 'package:flutter/material.dart';
 import 'package:home_widget/home_widget.dart';
 
 void setDigitalClockWidgetData(BuildContext context) async {
   try {
+    ColorScheme colorScheme=Theme.of(context).colorScheme;
+
     final digitalClockSettingGroup =
         appSettings.getGroup('Widgets').getGroup('Digital Clock');
     final layoutSettingGroup = digitalClockSettingGroup.getGroup('Layout');
     final dateSettingGroup = digitalClockSettingGroup.getGroup('Date');
     final timeSettingGroup = digitalClockSettingGroup.getGroup('Time');
-    final backgroundSettingGroup = digitalClockSettingGroup.getGroup('background');
+    final backgroundSettingGroup =
+        digitalClockSettingGroup.getGroup('background');
+
+    final ColorSchemeType colorSchemeType =
+        digitalClockSettingGroup.getSetting('colorScheme').value;
     final int horizontalAlignment =
         layoutSettingGroup.getSetting('Horizontal Alignment').value;
     final bool showDate = dateSettingGroup.getSetting('Show Date').value;
@@ -21,14 +29,20 @@ void setDigitalClockWidgetData(BuildContext context) async {
         timeSettingGroup.getSetting('Font Weight').value.round();
     final int dateFontWeight =
         dateSettingGroup.getSetting('Font Weight').value.round();
-    final String timeColor =
-        '#${timeSettingGroup.getSetting('Color').value.value.toRadixString(16)}';
-    final String dateColor =
-        '#${dateSettingGroup.getSetting('Color').value.value.toRadixString(16)}';
+    final Color appTextColor = colorScheme.onSurface;
+    final Color appAccentColor = colorScheme.primary;
+    final Color dateColor = colorSchemeType == ColorSchemeType.custom
+        ? dateSettingGroup.getSetting('Color').value
+        : appTextColor;
+    final Color timeColor = colorSchemeType == ColorSchemeType.custom
+        ? timeSettingGroup.getSetting('Color').value
+        : appAccentColor;
+    final String timeColorString = '#${timeColor.value.toRadixString(16)}';
+    final String dateColorString = '#${dateColor.value.toRadixString(16)}';
     final bool showMeridiem =
         timeSettingGroup.getSetting('Show Meridiem').value;
     final String separator =
-      timeSettingGroup.getSetting('Separator').value.toString();
+        timeSettingGroup.getSetting('Separator').value.toString();
     final String timeFormat = getTimeFormatString(
       context,
       appSettings
@@ -40,30 +54,43 @@ void setDigitalClockWidgetData(BuildContext context) async {
       separator: separator,
     );
     final String dateFormat = appSettings
-      .getGroup('General')
-      .getGroup('Display')
-      .getSetting('Long Date Format')
-      .value;
-    final String backgroundColor =
-      '#${backgroundSettingGroup.getSetting('backgroundColor').value.value.toRadixString(16)}';
-    final int backgroundOpacity = backgroundSettingGroup.getSetting('backgroundOpacity').value.round();
-    final int backgroundBorderRadius = backgroundSettingGroup.getSetting('backgroundBorderRadius').value.round();
+        .getGroup('General')
+        .getGroup('Display')
+        .getSetting('Long Date Format')
+        .value;
+    final Color appBackgroundColor = getCardColor(context);
+    final Color backgroundColor = colorSchemeType == ColorSchemeType.custom
+        ? backgroundSettingGroup.getSetting('backgroundColor').value
+        : appBackgroundColor;
+
+    final String backgroundColorString =
+        '#${backgroundColor.value.toRadixString(16)}';
+    final int backgroundOpacity =
+        backgroundSettingGroup.getSetting('backgroundOpacity').value.round();
+    final int backgroundBorderRadius = backgroundSettingGroup
+        .getSetting('backgroundBorderRadius')
+        .value
+        .round();
+
 
     await HomeWidget.saveWidgetData("timeFormat", timeFormat);
     await HomeWidget.saveWidgetData("dateFormat", dateFormat);
     await HomeWidget.saveWidgetData<bool>('showDate', showDate);
     await HomeWidget.saveWidgetData<int>('timeSize', timeSize);
     await HomeWidget.saveWidgetData<int>('dateSize', dateSize);
-    await HomeWidget.saveWidgetData<String>('timeColor', timeColor);
-    await HomeWidget.saveWidgetData<String>('dateColor', dateColor);
+    await HomeWidget.saveWidgetData<String>('timeColor', timeColorString);
+    await HomeWidget.saveWidgetData<String>('dateColor', dateColorString);
     await HomeWidget.saveWidgetData<int>(
         'horizontalAlignment', horizontalAlignment);
     // await HomeWidget.saveWidgetData<int>('verticalAlignment', verticalAlignment);
     await HomeWidget.saveWidgetData<int>('timeFontWeight', timeFontWeight);
     await HomeWidget.saveWidgetData<int>('dateFontWeight', dateFontWeight);
-    await HomeWidget.saveWidgetData<int>('backgroundOpacity', backgroundOpacity);
-    await HomeWidget.saveWidgetData<int>('backgroundBorderRadius', backgroundBorderRadius);
-    await HomeWidget.saveWidgetData<String>('backgroundColor', backgroundColor);
+    await HomeWidget.saveWidgetData<int>(
+        'backgroundOpacity', backgroundOpacity);
+    await HomeWidget.saveWidgetData<int>(
+        'backgroundBorderRadius', backgroundBorderRadius);
+    await HomeWidget.saveWidgetData<String>(
+        'backgroundColor', backgroundColorString);
 
     updateDigitalClockWidget();
   } catch (e) {