accounts-ui: Make accounts list scrollable

Before this fix, the list of accounts did not scroll
when they were more than a screenful and would
show an overflow error on the screen.

After this fix, the list of accounts scrolls properly
with no overflow error and without shifting other
content offscreen.

Fixes: #100

Author: sm-sayedi

lib/widgets/app.dart

@@ -194,12 +194,15 @@ class ChooseAccountPage extends StatelessWidget {
         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)),
+            child: Column(mainAxisSize: MainAxisSize.min, children: [
+              Flexible(child: SingleChildScrollView(
+                child: Column(mainAxisSize: MainAxisSize.min, 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,

test/widgets/app_test.dart

@@ -1,9 +1,12 @@
 import 'package:checks/checks.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/model/database.dart';
 import 'package:zulip/widgets/app.dart';
 import 'package:zulip/widgets/inbox.dart';
 import 'package:zulip/widgets/page.dart';
+import 'package:zulip/widgets/store.dart';
 
 import '../example_data.dart' as eg;
 import '../model/binding.dart';
@@ -51,4 +54,56 @@ void main() {
       ]);
     });
   });
+
+  group('choose account page', () {
+    Future<void> setupChooseAccountPage(WidgetTester tester, {
+      List<Account>? accounts,
+    }) async {
+      addTearDown(testBinding.reset);
+
+      for (final account in accounts ?? []) {
+        await testBinding.globalStore
+          .insertAccount(account.toCompanion(false));
+      }
+
+      await tester.pumpWidget(
+        const MaterialApp(
+          localizationsDelegates: ZulipLocalizations.localizationsDelegates,
+          supportedLocales: ZulipLocalizations.supportedLocales,
+          home: GlobalStoreWidget(
+            child: ChooseAccountPage())));
+
+      // global store gets loaded
+      await tester.pumpAndSettle();
+    }
+
+    List<Account> dummyAccounts(int count) {
+      return List.generate(count, (i) => eg.account(
+        id: i,
+        user: eg.user(fullName: 'User $i', email: 'user$i@example'),
+        apiKey: 'user${i}apikey',
+      ));
+    }
+
+    Finder findAccount(Account account) => find.text(account.email).hitTestable();
+
+    void checkAccountShown(Account account, {required bool expected}) {
+      check(findAccount(account).evaluate().length).equals(expected ? 1 : 0);
+    }
+
+    testWidgets('accounts list is scrollable when more than a screenful', (tester) async {
+      final accounts = dummyAccounts(15);
+      await setupChooseAccountPage(tester, accounts: accounts);
+
+      // Accounts list is more than a screenful
+      //  * First account is shown
+      //  * Last account is out of view
+      checkAccountShown(accounts.first, expected: true);
+      checkAccountShown(accounts.last, expected: false);
+
+      // Accounts list is scrollable to the bottom
+      await tester.scrollUntilVisible(findAccount(accounts.last), 50);
+      checkAccountShown(accounts.last, expected: true);
+    });
+  });
 }