accounts ui: Make list of accounts scrollable

Fixes: #100

Author: chrisbobbe

lib/widgets/app.dart

@@ -58,24 +58,39 @@ class ChooseAccountPage extends StatelessWidget {
     final globalStore = GlobalStoreWidget.of(context);
     return Scaffold(
       appBar: AppBar(title: const Text('Choose account')),
-      body: SafeArea(
-        minimum: const EdgeInsets.all(8),
-        child: Center(
-          child: ConstrainedBox(
-            constraints: const BoxConstraints(maxWidth: 400),
-            child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
-              for (final (:accountId, :account) in globalStore.accountEntries)
-                _buildAccountItem(context,
-                  accountId: accountId,
-                  title: Text(account.realmUrl.toString()),
-                  subtitle: Text(account.email)),
-              const SizedBox(height: 12),
-              ElevatedButton(
-                onPressed: () => Navigator.push(context,
-                  AddAccountPage.buildRoute()),
-                child: const Text('Add an account')),
-            ]))),
-      ));
+      body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+        Builder(builder: (context) =>
+          MediaQuery.removePadding(
+            context: context,
+            removeBottom: true,
+            child: Expanded(
+              child: SingleChildScrollView(
+                child: SafeArea(
+                  minimum: const EdgeInsets.all(8),
+                  child: Center(
+                    child: ConstrainedBox(
+                      constraints: const BoxConstraints(maxWidth: 400),
+                      child: Column(children: [
+                        for (final (:accountId, :account) in globalStore.accountEntries)
+                          _buildAccountItem(context,
+                            accountId: accountId,
+                            title: Text(account.realmUrl.toString()),
+                            subtitle: Text(account.email)),
+                      ])))))))),
+        const Divider(height: 0), // remove padding; height clamped to 1 physical pixel
+        // TODO might look odd on wide screens, like tablets; adapt?
+        SafeArea(
+          minimum: const EdgeInsets.all(8),
+          child: Column(children: [
+            MenuItemButton(
+              // round corners; not flush with device edge (SafeArea padding)
+              style: const ButtonStyle(shape: MaterialStatePropertyAll(StadiumBorder())),
+              leadingIcon: const Icon(Icons.add),
+              onPressed: () => Navigator.push(context,
+                AddAccountPage.buildRoute()),
+              child: const Text('Add an account')),
+          ])),
+      ]));
   }
 }