[pve-devel] [PATCH proxmox_login_manager v2 3/4] fix: ui: remove app bar and stack the close button on body

[Shan Shaji <s.shaji@proxmox.com>]

In landscape and portrait mode when adding a remote once the "Origin"
field is selected, the top bar becomes a slightly different shade of
blue. This occurs after the keyboard appears and the entire body
begins to scroll.

To fix this, the app bar was removed and the close button was stacked
within the body. The height was also constrained to avoid system
intrusion areas otherwise, the Continue button would not be visible.

Additionally, in landscape mode, the logo caused render flex issues
because the `Image`` widget was placed inside a `Column` and the logo
was trying to take more height than the available height. This was
fixed by removing the column and used `Align` widget to center the logo.

Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
 changes since v1:
 - Remove the SafeArea wrapping the stack. 
 - Wrap the login body and Close button with SafeArea.
 - Stack the close button on top of loading overlay or else it would be
   impossible to press the close button.
 lib/proxmox_login_form.dart | 47 +++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 8f290b4..80dc4a2 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -308,24 +308,17 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
       ),
       child: Scaffold(
         backgroundColor: ProxmoxColors.supportBlue,
-        extendBodyBehindAppBar: true,
-        appBar: AppBar(
-          elevation: 0.0,
-          backgroundColor: Colors.transparent,
-          leading: IconButton(
-            icon: const Icon(Icons.close),
-            tooltip: "Close",
-            onPressed: () => Navigator.of(context).pop(),
-          ),
-        ),
         body: Stack(
           children: [
-            SingleChildScrollView(
+            SafeArea(
+              child: SingleChildScrollView(
               child: ConstrainedBox(
                 constraints: BoxConstraints.tightFor(
-                    height: MediaQuery.of(context).size.height),
-                child: SafeArea(
-                  child: Padding(
+                  height: MediaQuery.sizeOf(context).height -
+                      MediaQuery.viewPaddingOf(context).bottom -
+                      MediaQuery.viewPaddingOf(context).top,
+                ),
+                child: Padding(
                     padding: EdgeInsets.symmetric(
                       horizontal: MediaQuery.maybeOrientationOf(context) ==
                               Orientation.portrait
@@ -347,15 +340,13 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
                               mainAxisAlignment: MainAxisAlignment.center,
                               children: [
                                 Expanded(
-                                  child: Column(
-                                    mainAxisAlignment: MainAxisAlignment.center,
-                                    children: [
-                                      Image.asset(
-                                        'assets/images/proxmox_logo_symbol_wordmark.png',
-                                        package: 'proxmox_login_manager',
-                                      ),
-                                    ],
-                                  ),
+                                  child: Align(
+                                    alignment: Alignment.center,
+                                    child: Image.asset(
+                                      'assets/images/proxmox_logo_symbol_wordmark.png',
+                                      package: 'proxmox_login_manager',
+                                    ),
+                                  )
                                 ),
                                 ProxmoxLoginForm(
                                   originController: _originController,
@@ -449,10 +440,16 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
                         }),
                   ),
                 ),
-              ),
-            ),
+              )),
             if (_progressModel.inProgress > 0)
               ProxmoxProgressOverlay(message: _progressModel.message),
+            SafeArea(
+              child: IconButton(
+                icon: const Icon(Icons.close),
+                tooltip: "Close",
+                onPressed: () => Navigator.of(context).pop(),
+              ),
+            ),
           ],
         ),
       ),
-- 
2.50.1



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