From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <pve-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
	by lore.proxmox.com (Postfix) with ESMTPS id 6E2C71FF170
	for <inbox@lore.proxmox.com>; Thu, 12 Jun 2025 10:57:32 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
	by firstgate.proxmox.com (Proxmox) with ESMTP id 3317218448;
	Thu, 12 Jun 2025 10:57:55 +0200 (CEST)
From: Shan Shaji <s.shaji@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Thu, 12 Jun 2025 10:57:46 +0200
Message-Id: <20250612085746.18066-1-s.shaji@proxmox.com>
X-Mailer: git-send-email 2.39.5 (Apple Git-154)
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.172 Adjusted score from AWL reputation of From: address
 BAYES_00                 -1.9 Bayes spam probability is 0 to 1%
 DMARC_MISSING             0.1 Missing DMARC policy
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 POISEN_SPAM_PILL          0.1 Meta: its spam
 POISEN_SPAM_PILL_2        0.1 random spam to be learned in bayes
 POISEN_SPAM_PILL_4        0.1 random spam to be learned in bayes
 RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
 Validity was blocked. See
 https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
 information.
 RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
 Validity was blocked. See
 https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
 information.
 RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
 Validity was blocked. See
 https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
 information.
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_PASS               -0.001 SPF: sender matches SPF record
Subject: [pve-devel] [PATCH pve_flutter_frontend v2] fix: ui: remove blue
 background under bottom bar in iOS
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>, 
 <mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>, 
 <mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox VE development discussion <pve-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pve-devel-bounces@lists.proxmox.com
Sender: "pve-devel" <pve-devel-bounces@lists.proxmox.com>

In iOS, there was a blue background color visible beneath the bottom
bar, which caused the app to not utilize the full screen height.
Additionally, the colors of the app bar and the status bar
differed when the user began scrolling.

This issue was due to the container color used in the `ColoredSafeArea`
widget, which wrapped the `SafeArea` widget. To fix the issue,
remove the `ColoredSafeArea` and its usages, as all affected screens
already include an `AppBar` widget. Therefore, using a separate
`SafeArea` is not necessary.

Also skips running the `dart format` command as there are
formatting changes in the changed files and will be hard to
identify the changes if the files are formatted.

Additionaly since the `SafeArea` inside the resource tab and the
task log page is removed as a result the filter sheet was interferring
with the status bar in Android and notch in iOS. To fix the
issue, wrap the drawer content in `SafeArea`.

Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
 changes since v1:
 * Rebase the changes with master. 

 lib/pages/main_layout_slim.dart          | 10 +++++-----
 lib/widgets/colored_safe_area.dart       | 18 ------------------
 lib/widgets/pve_console_menu_widget.dart |  3 +--
 lib/widgets/pve_lxc_options_widget.dart  |  5 +----
 lib/widgets/pve_lxc_overview.dart        |  5 +----
 lib/widgets/pve_node_overview.dart       |  5 +----
 lib/widgets/pve_qemu_options_widget.dart |  5 +----
 lib/widgets/pve_qemu_overview.dart       |  6 ++----
 lib/widgets/pve_task_log_widget.dart     | 10 ++++------
 9 files changed, 16 insertions(+), 51 deletions(-)
 delete mode 100644 lib/widgets/colored_safe_area.dart

diff --git a/lib/pages/main_layout_slim.dart b/lib/pages/main_layout_slim.dart
index 8d6e5ed..3909d85 100644
--- a/lib/pages/main_layout_slim.dart
+++ b/lib/pages/main_layout_slim.dart
@@ -18,7 +18,6 @@ import 'package:pve_flutter_frontend/states/pve_file_selector_state.dart';
 import 'package:pve_flutter_frontend/states/pve_resource_state.dart';
 import 'package:pve_flutter_frontend/states/pve_storage_selector_state.dart';
 import 'package:pve_flutter_frontend/utils/renderers.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_capacity_indicator.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_custom_icon.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_gauge_chart.dart';
@@ -605,9 +604,10 @@ class MobileResourceOverview extends StatelessWidget {
           onTap: () {
             FocusScope.of(context).unfocus();
           },
-          child: ColoredSafeArea(
-              child: Scaffold(
-            endDrawer: PveMobileResourceFilterSheet(),
+          child: Scaffold(
+            endDrawer: SafeArea(
+              child: PveMobileResourceFilterSheet(),
+            ),
             appBar: AppBar(
               automaticallyImplyLeading: false,
               elevation: 0,
@@ -664,7 +664,7 @@ class MobileResourceOverview extends StatelessWidget {
                 }
               },
             ),
-          )),
+          ),
         );
       },
     );
diff --git a/lib/widgets/colored_safe_area.dart b/lib/widgets/colored_safe_area.dart
deleted file mode 100644
index acf097c..0000000
--- a/lib/widgets/colored_safe_area.dart
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ColoredSafeArea extends StatelessWidget {
-  final Widget child;
-  final Color? color;
-
-  const ColoredSafeArea({super.key, required this.child, this.color});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      color: color ?? Theme.of(context).colorScheme.primary,
-      child: SafeArea(
-        child: child,
-      ),
-    );
-  }
-}
diff --git a/lib/widgets/pve_console_menu_widget.dart b/lib/widgets/pve_console_menu_widget.dart
index cd8c314..98bb13c 100644
--- a/lib/widgets/pve_console_menu_widget.dart
+++ b/lib/widgets/pve_console_menu_widget.dart
@@ -7,7 +7,6 @@ import 'package:flutter/services.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:proxmox_dart_api_client/proxmox_dart_api_client.dart';
 import 'package:proxmox_login_manager/proxmox_general_settings_model.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:crypto/crypto.dart';
 
@@ -238,7 +237,7 @@ class PVEWebConsoleState extends State<PVEWebConsole> {
           value: ticket,
         ),
         builder: (context, snapshot) {
-          return ColoredSafeArea(
+          return SafeArea(
             child: InAppWebView(
               onReceivedServerTrustAuthRequest: (controller, challenge) async {
                 final cert = challenge.protectionSpace.sslCertificate;
diff --git a/lib/widgets/pve_lxc_options_widget.dart b/lib/widgets/pve_lxc_options_widget.dart
index 913f4b1..7ad0224 100644
--- a/lib/widgets/pve_lxc_options_widget.dart
+++ b/lib/widgets/pve_lxc_options_widget.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:pve_flutter_frontend/bloc/pve_lxc_overview_bloc.dart';
 import 'package:pve_flutter_frontend/states/pve_lxc_overview_state.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart';
 import 'package:pve_flutter_frontend/widgets/pve_config_switch_list_tile.dart';
 
@@ -16,8 +15,7 @@ class PveLxcOptions extends StatelessWidget {
         builder: (context, state) {
           final config = state.config;
           if (config != null) {
-            return ColoredSafeArea(
-              child: Scaffold(
+            return Scaffold(
                 appBar: AppBar(),
                 body: SingleChildScrollView(
                   child: Column(
@@ -88,7 +86,6 @@ class PveLxcOptions extends StatelessWidget {
                     ],
                   ),
                 ),
-              ),
             );
           }
           return const Center(
diff --git a/lib/widgets/pve_lxc_overview.dart b/lib/widgets/pve_lxc_overview.dart
index e8e6edb..3a5ae89 100644
--- a/lib/widgets/pve_lxc_overview.dart
+++ b/lib/widgets/pve_lxc_overview.dart
@@ -19,7 +19,6 @@ import 'package:pve_flutter_frontend/states/pve_storage_selector_state.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_state.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_viewer_state.dart';
 import 'package:pve_flutter_frontend/utils/utils.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart';
 import 'package:pve_flutter_frontend/widgets/pve_action_card_widget.dart';
@@ -70,8 +69,7 @@ class PveLxcOverview extends StatelessWidget {
           builder: (context, state) {
             final status = state.currentStatus;
             final config = state.config;
-            return ColoredSafeArea(
-              child: Scaffold(
+            return Scaffold(
                 appBar: AppBar(
                   elevation: 0,
                   title: Text(config?.hostname ?? 'CT $guestID'),
@@ -261,7 +259,6 @@ class PveLxcOverview extends StatelessWidget {
                     ],
                   ),
                 ),
-              ),
             );
           }),
     );
diff --git a/lib/widgets/pve_node_overview.dart b/lib/widgets/pve_node_overview.dart
index 3558549..857c32c 100644
--- a/lib/widgets/pve_node_overview.dart
+++ b/lib/widgets/pve_node_overview.dart
@@ -8,7 +8,6 @@ import 'package:pve_flutter_frontend/states/pve_node_overview_state.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_state.dart';
 import 'package:pve_flutter_frontend/utils/renderers.dart';
 import 'package:pve_flutter_frontend/utils/utils.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/pve_node_power_settings_widget.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_capacity_indicator.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart';
@@ -50,8 +49,7 @@ class PveNodeOverview extends StatelessWidget {
         final rrd = state.rrdData.where((e) => e.time != null);
         final fgColor =
             Theme.of(context).colorScheme.onPrimary.withValues(alpha: 0.75);
-        return ColoredSafeArea(
-          child: Scaffold(
+        return Scaffold(
             appBar: AppBar(
               //backgroundColor: Colors.transparent,
               elevation: 0,
@@ -449,7 +447,6 @@ class PveNodeOverview extends StatelessWidget {
                 ],
               ),
             ),
-          ),
         );
       },
     );
diff --git a/lib/widgets/pve_qemu_options_widget.dart b/lib/widgets/pve_qemu_options_widget.dart
index bb1e11a..7ed0a3e 100644
--- a/lib/widgets/pve_qemu_options_widget.dart
+++ b/lib/widgets/pve_qemu_options_widget.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:pve_flutter_frontend/bloc/pve_qemu_overview_bloc.dart';
 import 'package:pve_flutter_frontend/states/pve_qemu_overview_state.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart';
 import 'package:pve_flutter_frontend/widgets/pve_config_switch_list_tile.dart';
 
@@ -19,8 +18,7 @@ class PveQemuOptions extends StatelessWidget {
         builder: (context, state) {
           if (state.config != null) {
             final config = state.config!;
-            return ColoredSafeArea(
-              child: Scaffold(
+            return Scaffold(
                 appBar: AppBar(
                   leading: IconButton(
                     icon: const Icon(Icons.close),
@@ -152,7 +150,6 @@ class PveQemuOptions extends StatelessWidget {
                     ),
                   ),
                 ),
-              ),
             );
           }
           return const Center(
diff --git a/lib/widgets/pve_qemu_overview.dart b/lib/widgets/pve_qemu_overview.dart
index b019b0f..01a5a53 100644
--- a/lib/widgets/pve_qemu_overview.dart
+++ b/lib/widgets/pve_qemu_overview.dart
@@ -19,7 +19,6 @@ import 'package:pve_flutter_frontend/states/pve_storage_selector_state.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_state.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_viewer_state.dart';
 import 'package:pve_flutter_frontend/utils/utils.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart';
 import 'package:pve_flutter_frontend/widgets/pve_action_card_widget.dart';
@@ -71,8 +70,7 @@ class PveQemuOverview extends StatelessWidget {
             final config = state.config;
             final rrdData = state.rrdData;
 
-            return ColoredSafeArea(
-              child: Scaffold(
+            return Scaffold(
                   appBar: AppBar(
                     //backgroundColor: Colors.transparent,
                     elevation: 0,
@@ -250,7 +248,7 @@ class PveQemuOverview extends StatelessWidget {
                                 )
                             ]),
                     ],
-                  ))),
+                  )),
             );
           }),
     );
diff --git a/lib/widgets/pve_task_log_widget.dart b/lib/widgets/pve_task_log_widget.dart
index c8b749c..7efb522 100644
--- a/lib/widgets/pve_task_log_widget.dart
+++ b/lib/widgets/pve_task_log_widget.dart
@@ -4,7 +4,6 @@ import 'package:pve_flutter_frontend/bloc/pve_task_log_bloc.dart';
 import 'package:pve_flutter_frontend/bloc/pve_task_log_viewer_bloc.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_state.dart';
 import 'package:pve_flutter_frontend/states/pve_task_log_viewer_state.dart';
-import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart';
 import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart';
 import 'package:pve_flutter_frontend/widgets/pve_task_log_expansiontile_widget.dart';
@@ -37,8 +36,7 @@ class _PveTaskLogState extends State<PveTaskLog> {
     return ProxmoxStreamBuilder<PveTaskLogBloc, PveTaskLogState>(
         bloc: bloc,
         builder: (context, state) {
-          return ColoredSafeArea(
-            child: Scaffold(
+          return Scaffold(
               key: _scaffoldKey,
               appBar: AppBar(
                 leading: IconButton(
@@ -53,7 +51,8 @@ class _PveTaskLogState extends State<PveTaskLog> {
                 ],
               ),
               endDrawer: Drawer(
-                child: Padding(
+                child: SafeArea(
+                  child: Padding(
                   padding: const EdgeInsets.fromLTRB(16.0, 20.0, 16.0, 0),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
@@ -136,7 +135,7 @@ class _PveTaskLogState extends State<PveTaskLog> {
                     ],
                   ),
                 ),
-              ),
+              )),
               body: NotificationListener<ScrollNotification>(
                 onNotification: (ScrollNotification scrollInfo) {
                   if (scrollInfo.metrics.pixels >=
@@ -158,7 +157,6 @@ class _PveTaskLogState extends State<PveTaskLog> {
                         child: Text("No tasks found"),
                       ),
               ),
-            ),
           );
         });
   }
-- 
2.39.5 (Apple Git-154)



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