[pve-devel] [PATCH pve_flutter_frontend] fix: ui: remove blue background under bottom bar in iOS
Michael Köppl
m.koeppl at proxmox.com
Tue Jun 10 17:31:04 CEST 2025
Due to the changes to _MobileResourceFilterSheet [0], this patch no
longer applies. Needs a rebase.
[0]
https://lore.proxmox.com/pve-devel/20250522130825.79862-1-s.shaji@proxmox.com/
On 5/27/25 13:32, Shan Shaji wrote:
> 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. This commit removes the
> `ColoredSafeArea` and its usages, as all affected screens already
> include an `AppBar` widget. Therefore, using a separate `SafeArea`
> is unnecessary. This commit 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. It has also been
> fixed by wrapping the drawer content in `SafeArea`
>
> Signed-off-by: Shan Shaji <s.shaji at proxmox.com>
> ---
> lib/pages/main_layout_slim.dart | 11 +++++------
> 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(+), 52 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 3bcd83b..c80e308 100644
> --- a/lib/pages/main_layout_slim.dart
> +++ b/lib/pages/main_layout_slim.dart
> @@ -17,7 +17,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';
> @@ -604,8 +603,7 @@ class MobileResourceOverview extends StatelessWidget {
> onTap: () {
> FocusScope.of(context).unfocus();
> },
> - child: ColoredSafeArea(
> - child: Scaffold(
> + child: Scaffold(
> endDrawer: _MobileResourceFilterSheet(),
> appBar: AppBar(
> automaticallyImplyLeading: false,
> @@ -663,7 +661,7 @@ class MobileResourceOverview extends StatelessWidget {
> }
> },
> ),
> - )),
> + ),
> );
> },
> );
> @@ -852,7 +850,8 @@ class _MobileResourceFilterSheet extends StatelessWidget {
> return ProxmoxStreamBuilder<PveResourceBloc, PveResourceState>(
> bloc: rBloc,
> builder: (context, state) => Drawer(
> - child: SingleChildScrollView(
> + child: SafeArea(
> + child: SingleChildScrollView(
> child: Column(
> crossAxisAlignment: CrossAxisAlignment.start,
> children: <Widget>[
> @@ -1003,7 +1002,7 @@ class _MobileResourceFilterSheet 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"),
> ),
> ),
> - ),
> );
> });
> }
More information about the pve-devel
mailing list