all lists on lists.proxmox.com
 help / color / mirror / Atom feed
* [pve-devel] [PATCH pve_flutter_frontend] ui: replace deprecated `onBackground` property
@ 2025-05-05 14:33 Shan Shaji
  0 siblings, 0 replies; only message in thread
From: Shan Shaji @ 2025-05-05 14:33 UTC (permalink / raw)
  To: pve-devel

As of flutter v3.22, the `onBackground` property is deprecated. The
material guidelines suggest using the `onSurface` property instead.

https://m3.material.io/styles/color/roles#8562cf18-5cc0-44ae-b783-2e38bdb39585

For dark theme, the `onSurface` color and `onBackground` color is
different so it's not possible to directly replace the `onBackground`
with the `onSurface` property. This patch adds a new `onSurfaceVariant`
property to the theme and replaces all instances of `onBackground`
with `onSurfaceVariant`.

Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
 lib/main.dart                                      |  4 ++--
 lib/widgets/proxmox_capacity_indicator.dart        |  8 +++++---
 lib/widgets/pve_file_selector_widget.dart          | 14 +++++++++-----
 lib/widgets/pve_lxc_overview.dart                  |  2 +-
 lib/widgets/pve_qemu_overview.dart                 |  5 +++--
 lib/widgets/pve_task_log_expansiontile_widget.dart |  2 +-
 6 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/lib/main.dart b/lib/main.dart
index a985e3a..ac5a992 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -108,8 +108,8 @@ class MyApp extends StatelessWidget {
             secondaryContainer: ProxmoxColors.supportLightOrange,
             surface: ProxmoxColors.supportGreyTint50,
             onSurface: Colors.black,
+            onSurfaceVariant: Colors.black,
             background: ProxmoxColors.supportGreyTint75,
-            onBackground: Colors.black,
           ),
           indicatorColor: ProxmoxColors.orange,
           textButtonTheme: TextButtonThemeData(
@@ -147,8 +147,8 @@ class MyApp extends StatelessWidget {
             onSurface: Colors.white,
             secondary: ProxmoxColors.orange,
             secondaryContainer: ProxmoxColors.supportLightOrange,
+            onSurfaceVariant: ProxmoxColors.supportGreyTint75,
             background: ProxmoxColors.grey,
-            onBackground: ProxmoxColors.supportGreyTint75,
           ),
           indicatorColor: ProxmoxColors.orange,
           // flutter has a weird logic where it pulls colors from different
diff --git a/lib/widgets/proxmox_capacity_indicator.dart b/lib/widgets/proxmox_capacity_indicator.dart
index 8e87ab0..3ab3bb0 100644
--- a/lib/widgets/proxmox_capacity_indicator.dart
+++ b/lib/widgets/proxmox_capacity_indicator.dart
@@ -44,7 +44,7 @@ class ProxmoxCapacityIndicator extends StatelessWidget {
                                 ? Theme.of(context).colorScheme.onPrimary
                                 : Theme.of(context)
                                     .colorScheme
-                                    .onBackground
+                                    .onSurfaceVariant
                                     .withOpacity(0.75))),
                   ),
                   Text(usedValue,
@@ -54,7 +54,7 @@ class ProxmoxCapacityIndicator extends StatelessWidget {
                                       ? Theme.of(context).colorScheme.onPrimary
                                       : Theme.of(context)
                                           .colorScheme
-                                          .onBackground)
+                                          .onSurfaceVariant)
                                   .withOpacity(0.66),
                           fontWeight: FontWeight.bold)),
                 ],
@@ -64,7 +64,9 @@ class ProxmoxCapacityIndicator extends StatelessWidget {
                       color: textColor ??
                           (selected
                                   ? Theme.of(context).colorScheme.onPrimary
-                                  : Theme.of(context).colorScheme.onBackground)
+                                  : Theme.of(context)
+                                      .colorScheme
+                                      .onSurfaceVariant)
                               .withOpacity(0.66),
                       fontWeight: FontWeight.bold))
             ],
diff --git a/lib/widgets/pve_file_selector_widget.dart b/lib/widgets/pve_file_selector_widget.dart
index 87a547f..f1e8963 100644
--- a/lib/widgets/pve_file_selector_widget.dart
+++ b/lib/widgets/pve_file_selector_widget.dart
@@ -150,7 +150,7 @@ class PveFileSelectorWidget extends StatelessWidget {
                                   IconButton(
                                     color: Theme.of(context)
                                         .colorScheme
-                                        .onBackground,
+                                        .onSurfaceVariant,
                                     icon: const Icon(Icons.search),
                                     onPressed: () =>
                                         fBloc!.events.add(ToggleSearch()),
@@ -158,7 +158,7 @@ class PveFileSelectorWidget extends StatelessWidget {
                                   IconButton(
                                     color: Theme.of(context)
                                         .colorScheme
-                                        .onBackground,
+                                        .onSurfaceVariant,
                                     icon: Icon(
                                       state.gridView
                                           ? Icons.view_list
@@ -270,7 +270,9 @@ class PveStorageCard extends StatelessWidget {
                         style: TextStyle(
                             color: isSelected
                                 ? Theme.of(context).colorScheme.onPrimary
-                                : Theme.of(context).colorScheme.onBackground,
+                                : Theme.of(context)
+                                    .colorScheme
+                                    .onSurfaceVariant,
                             fontWeight: FontWeight.bold),
                       ),
                       Text(
@@ -278,7 +280,9 @@ class PveStorageCard extends StatelessWidget {
                         style: TextStyle(
                           color: (isSelected
                                   ? Theme.of(context).colorScheme.onPrimary
-                                  : Theme.of(context).colorScheme.onBackground)
+                                  : Theme.of(context)
+                                      .colorScheme
+                                      .onSurfaceVariant)
                               .withOpacity(0.75),
                           fontWeight: FontWeight.bold,
                         ),
@@ -307,7 +311,7 @@ class PveStorageCard extends StatelessWidget {
                               style: TextStyle(
                                 color: Theme.of(context)
                                     .colorScheme
-                                    .onBackground
+                                    .onSurfaceVariant
                                     .withOpacity(0.75),
                                 fontWeight: FontWeight.bold,
                               ),
diff --git a/lib/widgets/pve_lxc_overview.dart b/lib/widgets/pve_lxc_overview.dart
index 3c6808d..7f9217b 100644
--- a/lib/widgets/pve_lxc_overview.dart
+++ b/lib/widgets/pve_lxc_overview.dart
@@ -91,7 +91,7 @@ class PveLxcOverview extends StatelessWidget {
                                   style: TextStyle(
                                     color: Theme.of(context)
                                         .colorScheme
-                                        .onBackground,
+                                        .onSurfaceVariant,
                                   ),
                                 ),
                               ),
diff --git a/lib/widgets/pve_qemu_overview.dart b/lib/widgets/pve_qemu_overview.dart
index ac16d26..f870911 100644
--- a/lib/widgets/pve_qemu_overview.dart
+++ b/lib/widgets/pve_qemu_overview.dart
@@ -109,8 +109,9 @@ class PveQemuOverview extends StatelessWidget {
                         builder: (context, taskState) {
                           if (taskState.tasks.isNotEmpty) {
                             return PveTaskExpansionTile(
-                              headerColor:
-                                  Theme.of(context).colorScheme.onBackground,
+                              headerColor: Theme.of(context)
+                                  .colorScheme
+                                  .onSurfaceVariant,
                               task: taskState.tasks.first,
                               showMorePage: Provider<PveTaskLogBloc>(
                                 create: (context) => PveTaskLogBloc(
diff --git a/lib/widgets/pve_task_log_expansiontile_widget.dart b/lib/widgets/pve_task_log_expansiontile_widget.dart
index 6491b6b..3ac8c08 100644
--- a/lib/widgets/pve_task_log_expansiontile_widget.dart
+++ b/lib/widgets/pve_task_log_expansiontile_widget.dart
@@ -53,7 +53,7 @@ class _PveTaskExpansionTileState extends State<PveTaskExpansionTile> {
     final warningColor = Colors.orange.shade200;
     final headerColor = isExpanded
         ? (widget.headerColorExpanded ?? colorScheme.onSurface)
-        : (widget.headerColor ?? colorScheme.onBackground);
+        : (widget.headerColor ?? colorScheme.onSurfaceVariant);
 
     final taskText = widget.showMorePage != null ? 'Last Task' : 'Task';
 
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] only message in thread

only message in thread, other threads:[~2025-05-05 14:34 UTC | newest]

Thread overview: (only message) (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-05-05 14:33 [pve-devel] [PATCH pve_flutter_frontend] ui: replace deprecated `onBackground` property Shan Shaji

This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal