[pve-devel] [PATCH login_manager 1/2] login_form: keep Continue button above Android softnav

Aaron Lauterer a.lauterer at proxmox.com
Mon Dec 27 15:07:04 CET 2021


By placing the items in a SafeArea we avoid having the "Continue" button
behind the Android soft navigation buttons.

Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
---
 lib/proxmox_login_form.dart | 265 ++++++++++++++++++------------------
 1 file changed, 135 insertions(+), 130 deletions(-)

diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 2609f71..bb00b5c 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -232,152 +232,157 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
               child: ConstrainedBox(
                 constraints: BoxConstraints.tightFor(
                     height: MediaQuery.of(context).size.height),
-                child: Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: FutureBuilder<List<PveAccessDomainModel?>?>(
-                      future: _accessDomains,
-                      builder: (context, snapshot) {
-                        return Form(
-                          key: _formKey,
-                          onChanged: () {
-                            setState(() {
-                              _submittButtonEnabled =
-                                  _formKey.currentState!.validate();
-                            });
-                          },
-                          child: Column(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [
-                              Expanded(
-                                child: Container(
-                                  child: Column(
-                                    mainAxisAlignment: MainAxisAlignment.center,
-                                    children: [
-                                      Image.asset(
-                                        'assets/images/proxmox_logo_symbol_wordmark.png',
-                                        package: 'proxmox_login_manager',
-                                      ),
-                                    ],
+                child: SafeArea(
+                  child: Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: FutureBuilder<List<PveAccessDomainModel?>?>(
+                        future: _accessDomains,
+                        builder: (context, snapshot) {
+                          return Form(
+                            key: _formKey,
+                            onChanged: () {
+                              setState(() {
+                                _submittButtonEnabled =
+                                    _formKey.currentState!.validate();
+                              });
+                            },
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                Expanded(
+                                  child: Container(
+                                    child: Column(
+                                      mainAxisAlignment:
+                                          MainAxisAlignment.center,
+                                      children: [
+                                        Image.asset(
+                                          'assets/images/proxmox_logo_symbol_wordmark.png',
+                                          package: 'proxmox_login_manager',
+                                        ),
+                                      ],
+                                    ),
                                   ),
                                 ),
-                              ),
-                              ProxmoxLoginForm(
-                                originController: _originController,
-                                originValidator: (value) {
-                                  if (value == null || value.isEmpty) {
-                                    return 'Please enter origin';
-                                  }
-                                  if (value.startsWith('https://') ||
-                                      value.startsWith('http://')) {
-                                    return 'Do not prefix with scheme';
-                                  }
-                                  try {
-                                    Uri.https(value, '');
-                                    return null;
-                                  } on FormatException catch (_) {
-                                    return 'Invalid URI';
-                                  }
-                                },
-                                usernameController: _usernameController,
-                                passwordController: _passwordController,
-                                accessDomains: snapshot.data,
-                                selectedDomain: _selectedDomain,
-                                onDomainChanged: (value) {
-                                  setState(() {
-                                    _selectedDomain = value;
-                                  });
-                                },
-                                onOriginSubmitted: _submittButtonEnabled
-                                    ? () {
-                                        final isValid =
-                                            _formKey.currentState!.validate();
-                                        setState(() {
-                                          _submittButtonEnabled = isValid;
-                                        });
-                                        if (isValid) {
+                                ProxmoxLoginForm(
+                                  originController: _originController,
+                                  originValidator: (value) {
+                                    if (value == null || value.isEmpty) {
+                                      return 'Please enter origin';
+                                    }
+                                    if (value.startsWith('https://') ||
+                                        value.startsWith('http://')) {
+                                      return 'Do not prefix with scheme';
+                                    }
+                                    try {
+                                      Uri.https(value, '');
+                                      return null;
+                                    } on FormatException catch (_) {
+                                      return 'Invalid URI';
+                                    }
+                                  },
+                                  usernameController: _usernameController,
+                                  passwordController: _passwordController,
+                                  accessDomains: snapshot.data,
+                                  selectedDomain: _selectedDomain,
+                                  onDomainChanged: (value) {
+                                    setState(() {
+                                      _selectedDomain = value;
+                                    });
+                                  },
+                                  onOriginSubmitted: _submittButtonEnabled
+                                      ? () {
+                                          final isValid =
+                                              _formKey.currentState!.validate();
                                           setState(() {
-                                            _accessDomains =
-                                                _getAccessDomains();
+                                            _submittButtonEnabled = isValid;
                                           });
+                                          if (isValid) {
+                                            setState(() {
+                                              _accessDomains =
+                                                  _getAccessDomains();
+                                            });
+                                          }
                                         }
-                                      }
-                                    : null,
-                                onPasswordSubmitted: _submittButtonEnabled
-                                    ? () {
-                                        final isValid =
-                                            _formKey.currentState!.validate();
-                                        setState(() {
-                                          _submittButtonEnabled = isValid;
-                                        });
-                                        if (isValid) {
-                                          _onLoginButtonPressed();
+                                      : null,
+                                  onPasswordSubmitted: _submittButtonEnabled
+                                      ? () {
+                                          final isValid =
+                                              _formKey.currentState!.validate();
+                                          setState(() {
+                                            _submittButtonEnabled = isValid;
+                                          });
+                                          if (isValid) {
+                                            _onLoginButtonPressed();
+                                          }
                                         }
-                                      }
-                                    : null,
-                              ),
-                              if (snapshot.hasData)
-                                Expanded(
-                                  child: Align(
-                                    alignment: Alignment.bottomCenter,
-                                    child: Container(
-                                      width: MediaQuery.of(context).size.width,
-                                      child: FlatButton(
-                                        onPressed: _submittButtonEnabled
-                                            ? () {
-                                                final isValid = _formKey
-                                                    .currentState!
-                                                    .validate();
-                                                setState(() {
-                                                  _submittButtonEnabled =
-                                                      isValid;
-                                                });
-                                                if (isValid) {
-                                                  _onLoginButtonPressed();
+                                      : null,
+                                ),
+                                if (snapshot.hasData)
+                                  Expanded(
+                                    child: Align(
+                                      alignment: Alignment.bottomCenter,
+                                      child: Container(
+                                        width:
+                                            MediaQuery.of(context).size.width,
+                                        child: FlatButton(
+                                          onPressed: _submittButtonEnabled
+                                              ? () {
+                                                  final isValid = _formKey
+                                                      .currentState!
+                                                      .validate();
+                                                  setState(() {
+                                                    _submittButtonEnabled =
+                                                        isValid;
+                                                  });
+                                                  if (isValid) {
+                                                    _onLoginButtonPressed();
+                                                  }
                                                 }
-                                              }
-                                            : null,
-                                        color: ProxmoxColors.orange,
-                                        disabledColor: Colors.grey,
-                                        child: Text('Continue'),
+                                              : null,
+                                          color: ProxmoxColors.orange,
+                                          disabledColor: Colors.grey,
+                                          child: Text('Continue'),
+                                        ),
                                       ),
                                     ),
                                   ),
-                                ),
-                              if (!snapshot.hasData)
-                                Expanded(
-                                  child: Align(
-                                    alignment: Alignment.bottomCenter,
-                                    child: Container(
-                                      width: MediaQuery.of(context).size.width,
-                                      child: FlatButton(
-                                        onPressed: _submittButtonEnabled
-                                            ? () {
-                                                final isValid = _formKey
-                                                    .currentState!
-                                                    .validate();
-                                                setState(() {
-                                                  _submittButtonEnabled =
-                                                      isValid;
-                                                });
-                                                if (isValid) {
+                                if (!snapshot.hasData)
+                                  Expanded(
+                                    child: Align(
+                                      alignment: Alignment.bottomCenter,
+                                      child: Container(
+                                        width:
+                                            MediaQuery.of(context).size.width,
+                                        child: FlatButton(
+                                          onPressed: _submittButtonEnabled
+                                              ? () {
+                                                  final isValid = _formKey
+                                                      .currentState!
+                                                      .validate();
                                                   setState(() {
-                                                    _accessDomains =
-                                                        _getAccessDomains();
+                                                    _submittButtonEnabled =
+                                                        isValid;
                                                   });
+                                                  if (isValid) {
+                                                    setState(() {
+                                                      _accessDomains =
+                                                          _getAccessDomains();
+                                                    });
+                                                  }
                                                 }
-                                              }
-                                            : null,
-                                        color: ProxmoxColors.orange,
-                                        child: Text('Continue'),
-                                        disabledColor: Colors.grey,
+                                              : null,
+                                          color: ProxmoxColors.orange,
+                                          child: Text('Continue'),
+                                          disabledColor: Colors.grey,
+                                        ),
                                       ),
                                     ),
                                   ),
-                                ),
-                            ],
-                          ),
-                        );
-                      }),
+                              ],
+                            ),
+                          );
+                        }),
+                  ),
                 ),
               ),
             ),
-- 
2.30.2





More information about the pve-devel mailing list