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 a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal