From: Shan Shaji <s.shaji@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH pve_flutter_frontend v2] ui: replace deprecated `onBackground` property
Date: Thu, 5 Jun 2025 10:23:22 +0200 [thread overview]
Message-ID: <20250605082322.57783-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.To fix the issue, add a new
`onSurfaceVariant` property to the theme and replace all
instances of `onBackground` with `onSurfaceVariant`.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
changes since v1:
* rebased branch with the changes from master.
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 94eac94..6a7c5a9 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -109,7 +109,7 @@ class MyApp extends StatelessWidget {
surface: ProxmoxColors.supportGreyTint50,
onSurface: Colors.black,
surfaceContainer: ProxmoxColors.supportGreyTint75,
- onBackground: Colors.black,
+ onSurfaceVariant: Colors.black,
),
indicatorColor: ProxmoxColors.orange,
textButtonTheme: TextButtonThemeData(
@@ -148,7 +148,7 @@ class MyApp extends StatelessWidget {
secondary: ProxmoxColors.orange,
secondaryContainer: ProxmoxColors.supportLightOrange,
surfaceContainer: ProxmoxColors.grey,
- onBackground: ProxmoxColors.supportGreyTint75,
+ onSurfaceVariant: 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 ad95c29..620cdc2 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
.withValues(alpha: 0.75))),
),
Text(usedValue,
@@ -54,7 +54,7 @@ class ProxmoxCapacityIndicator extends StatelessWidget {
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context)
.colorScheme
- .onBackground)
+ .onSurfaceVariant)
.withValues(alpha: 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)
.withValues(alpha: 0.66),
fontWeight: FontWeight.bold))
],
diff --git a/lib/widgets/pve_file_selector_widget.dart b/lib/widgets/pve_file_selector_widget.dart
index 9770ff8..e1dea78 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)
.withValues(alpha: 0.75),
fontWeight: FontWeight.bold,
),
@@ -307,7 +311,7 @@ class PveStorageCard extends StatelessWidget {
style: TextStyle(
color: Theme.of(context)
.colorScheme
- .onBackground
+ .onSurfaceVariant
.withValues(alpha: 0.75),
fontWeight: FontWeight.bold,
),
diff --git a/lib/widgets/pve_lxc_overview.dart b/lib/widgets/pve_lxc_overview.dart
index e8e6edb..4129084 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 b019b0f..4d4bd05 100644
--- a/lib/widgets/pve_qemu_overview.dart
+++ b/lib/widgets/pve_qemu_overview.dart
@@ -110,8 +110,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 4f087b5..2e0dba6 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-06-05 8:23 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-06-05 8:23 Shan Shaji [this message]
2025-07-01 11:55 ` [pve-devel] applied: " Dominik Csapak
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=20250605082322.57783-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.