From: Shan Shaji <s.shaji@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH pve_flutter_frontend] ui: replace deprecated `onBackground` property
Date: Mon, 5 May 2025 16:33:31 +0200 [thread overview]
Message-ID: <20250505143331.83707-1-s.shaji@proxmox.com> (raw)
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
next reply other threads:[~2025-05-05 14:34 UTC|newest]
Thread overview: 5+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-05-05 14:33 Shan Shaji [this message]
2025-05-27 12:28 ` Shan Shaji
2025-06-04 10:11 ` Dominik Csapak
2025-06-05 6:57 ` Shan Shaji
2025-06-05 8:25 ` Shan Shaji
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20250505143331.83707-1-s.shaji@proxmox.com \
--to=s.shaji@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
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