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

[Shan Shaji]

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 at proxmox.com>
---
 lib/proxmox_login_form.dart | 43 ++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index c3781db..30f2ef8 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -305,24 +305,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(
+        body: SafeArea(
+          child: Stack(
           children: [
             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
@@ -344,15 +337,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,
@@ -447,12 +438,16 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
                   ),
                 ),
               ),
+            IconButton(
+              icon: const Icon(Icons.close),
+              tooltip: "Close",
+              onPressed: () => Navigator.of(context).pop(),
             ),
             if (_progressModel.inProgress > 0)
               ProxmoxProgressOverlay(message: _progressModel.message),
           ],
         ),
-      ),
+      )),
     );
   }
 
-- 
2.50.1