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,12 +1,17 @@
 import 'package:checks/checks.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import 'package:flutter/widgets.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';
+import '../model/test_store.dart';
 import '../test_navigation.dart';
 import 'page_checks.dart';
 
@@ -50,5 +55,63 @@ void main() {
           ..page.isA<InboxPage>(),
       ]);
     });
+
+    Future<void> setupChooseAccountPage(WidgetTester tester, {
+      List<Account>? accounts,
+    }) async {
+      addTearDown(testBinding.reset);
+
+      accounts ??= [eg.selfAccount];
+      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();
+    }
+
+    Iterable<Account> dummyAccounts(int count) sync* {
+      var i = 0;
+      while (i < count) {
+        yield eg.account(
+          id: i,
+          user: eg.user(fullName: 'User $i', email: 'user$i@example'),
+          apiKey: 'user${i}apikey',
+        );
+        i++;
+      }
+    }
+
+    Finder findAccount(Account account) {
+      return 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).toList();
+
+      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);
+    });
   });
 }