* [pve-devel] [PATCH pve_flutter_frontend v2] fix: ui: remove blue background under bottom bar in iOS @ 2025-06-12 8:57 Shan Shaji 2025-06-13 12:29 ` Michael Köppl 0 siblings, 1 reply; 3+ messages in thread From: Shan Shaji @ 2025-06-12 8:57 UTC (permalink / raw) To: pve-devel 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 ^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [pve-devel] [PATCH pve_flutter_frontend v2] fix: ui: remove blue background under bottom bar in iOS 2025-06-12 8:57 [pve-devel] [PATCH pve_flutter_frontend v2] fix: ui: remove blue background under bottom bar in iOS Shan Shaji @ 2025-06-13 12:29 ` Michael Köppl 2025-06-17 15:37 ` Shan Shaji 0 siblings, 1 reply; 3+ messages in thread From: Michael Köppl @ 2025-06-13 12:29 UTC (permalink / raw) To: Proxmox VE development discussion, Shan Shaji Tested the effects of the changes on Android, so I cannot say anything about the effects on iOS. With the exception noted below, I did not notice any problems in the UI, neither in portrait mode nor in landscape mode. I compared the visual changes in all affected widgets. I left 2 comments inline. On 6/12/25 10:57, 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. 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. Please also consider rewriting the commit message to focus on stating the semantic change of the commit. Paragraphs like this one about `dart format` should go under ---. > > 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`. This seems to affect the two widgets differently. While the "interference" with the status bar is fixed in both cases, the filter sheet in the task log widget now goes all the way to the top of the screen (hiding part of the app bar below it), whereas the filter sheet in the resources tab still begins just under the app bar. While I do prefer the sheet that goes above the app bar personally (very subjective, of course), I'd consider consistency the most important aspect. Maybe someone else can chime in regarding their preferred option, but whichever ends up being used, it should be applied to *all* filter sheets. > > 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"), > ), > ), > - ), > ); > }); > } _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel ^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [pve-devel] [PATCH pve_flutter_frontend v2] fix: ui: remove blue background under bottom bar in iOS 2025-06-13 12:29 ` Michael Köppl @ 2025-06-17 15:37 ` Shan Shaji 0 siblings, 0 replies; 3+ messages in thread From: Shan Shaji @ 2025-06-17 15:37 UTC (permalink / raw) To: Michael Köppl, Proxmox VE development discussion Superseeded by v3: https://lore.proxmox.com/pve-devel/20250617153145.18048-1-s.shaji@proxmox.com/T/#u On Fri Jun 13, 2025 at 2:29 PM CEST, Michael Köppl wrote: > Tested the effects of the changes on Android, so I cannot say anything > about the effects on iOS. With the exception noted below, I did not > notice any problems in the UI, neither in portrait mode nor in landscape > mode. I compared the visual changes in all affected widgets. > > I left 2 comments inline. > > On 6/12/25 10:57, 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. 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. > > Please also consider rewriting the commit message to focus on stating > the semantic change of the commit. Paragraphs like this one about `dart > format` should go under ---. > > > > > 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`. > > This seems to affect the two widgets differently. While the > "interference" with the status bar is fixed in both cases, the filter > sheet in the task log widget now goes all the way to the top of the > screen (hiding part of the app bar below it), whereas the filter sheet > in the resources tab still begins just under the app bar. While I do > prefer the sheet that goes above the app bar personally (very > subjective, of course), I'd consider consistency the most important > aspect. Maybe someone else can chime in regarding their preferred > option, but whichever ends up being used, it should be applied to *all* > filter sheets. _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel ^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2025-06-17 15:36 UTC | newest] Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 2025-06-12 8:57 [pve-devel] [PATCH pve_flutter_frontend v2] fix: ui: remove blue background under bottom bar in iOS Shan Shaji 2025-06-13 12:29 ` Michael Köppl 2025-06-17 15:37 ` Shan Shaji
This is a public inbox, see mirroring instructions for how to clone and mirror all data and code used for this inboxService provided by Proxmox Server Solutions GmbH | Privacy | Legal