[pve-devel] [PATCH pve_flutter_frontend] ui: replace deprecated `onBackground` property
Shan Shaji
s.shaji at proxmox.com
Mon May 5 16:33:31 CEST 2025
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 at 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
More information about the pve-devel
mailing list