[Rolodex] Update fidelity of Contact list screens (#2588)

This PR:

- Updates the fidelity of the home screen and contact list screens to near full fidelity
- Renames "Contact Lists" to "Contact Groups". We have multiple collections of contacts, so having lists of lists felt confusing
- Adds more functionality to the data models

Comparison of the two screens against native:

| Native | Flutter |
| --- | --- |
| <img width="418" alt="Screenshot 2025-02-19 at 2 59 58 PM" src="https://github.com/user-attachments/assets/1cc53d19-6bb5-4782-82fa-1a62cd75fd51" /> | <img width="397" alt="Screenshot 2025-02-19 at 2 58 54 PM" src="https://github.com/user-attachments/assets/ddab75f2-4aec-4239-a736-690a3185c196" /> |
| <img width="409" alt="Screenshot 2025-02-19 at 2 59 41 PM" src="https://github.com/user-attachments/assets/ee0d81ee-ae60-47ad-b071-266f39ce9b70" /> | <img width="402" alt="Screenshot 2025-02-19 at 2 58 45 PM" src="https://github.com/user-attachments/assets/88bf22f9-d8bd-40d7-a9ca-f2ded439de6c" /> |

Notably the container widget on the first screen is a placeholder, until a Cupertino collapsable widget is made.

rolodex/lib/data/contact.dart

@@ -3,7 +3,43 @@
 // found in the LICENSE file.
 
 class Contact {
-  Contact({required this.id});
+  Contact({
+    required this.id,
+    required this.firstName,
+    this.middleName,
+    required this.lastName,
+    this.suffix,
+  });
 
   final int id;
+  final String firstName;
+  final String lastName;
+  final String? middleName;
+  final String? suffix;
 }
+
+final johnAppleseed = Contact(id: 0, firstName: 'John', lastName: 'Appleseed');
+final kateBell = Contact(id: 1, firstName: 'Kate', lastName: 'Bell');
+final annaHaro = Contact(id: 2, firstName: 'Anna', lastName: 'Haro');
+final danielHiggins = Contact(
+  id: 3,
+  firstName: 'Daniel',
+  lastName: 'Higgins',
+  suffix: 'Jr.',
+);
+final davidTaylor = Contact(id: 4, firstName: 'David', lastName: 'Taylor');
+final hankZakroff = Contact(
+  id: 5,
+  firstName: 'Hank',
+  middleName: 'M.',
+  lastName: 'Zakroff',
+);
+
+final Set<Contact> allContacts = <Contact>{
+  johnAppleseed,
+  kateBell,
+  annaHaro,
+  danielHiggins,
+  davidTaylor,
+  hankZakroff,
+};

rolodex/lib/data/contact_group.dart

@@ -0,0 +1,118 @@
+// Copyright 2018 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:collection';
+
+import 'package:flutter/cupertino.dart';
+
+import 'contact.dart';
+
+void _sortContacts(List<Contact> contacts) {
+  contacts.sort((Contact a, Contact b) {
+    final int checkLastName = a.lastName.compareTo(b.lastName);
+    if (checkLastName != 0) {
+      return checkLastName;
+    }
+    final int checkFirstName = a.firstName.compareTo(b.firstName);
+    if (checkFirstName != 0) {
+      return checkFirstName;
+    }
+    if (a.middleName != null && b.middleName != null) {
+      final int checkMiddleName = a.middleName!.compareTo(b.middleName!);
+      if (checkMiddleName != 0) {
+        return checkMiddleName;
+      }
+    } else if (a.middleName != null || b.middleName != null) {
+      return a.middleName != null ? 1 : -1;
+    }
+    // If both contacts have the exact same name, order by first created.
+    return a.id.compareTo(b.id);
+  });
+}
+
+typedef AlphabetizedContactMap = SplayTreeMap<String, List<Contact>>;
+
+class ContactGroup {
+  factory ContactGroup({
+    required int id,
+    required String label,
+    bool permanent = false,
+    String? title,
+    List<Contact>? contacts,
+  }) {
+    final contactsCopy = contacts ?? <Contact>[];
+    _sortContacts(contactsCopy);
+    return ContactGroup._internal(
+      id: id,
+      label: label,
+      permanent: permanent,
+      title: title,
+      contacts: contactsCopy,
+    );
+  }
+
+  ContactGroup._internal({
+    required this.id,
+    required this.label,
+    this.permanent = false,
+    String? title,
+    List<Contact>? contacts,
+  }) : title = title ?? label,
+       _contacts = contacts ?? const <Contact>[];
+
+  final int id;
+
+  final bool permanent;
+
+  final String label;
+
+  final String title;
+
+  final List<Contact> _contacts;
+
+  List<Contact> get contacts => _contacts;
+
+  AlphabetizedContactMap get alphabetizedContacts {
+    final AlphabetizedContactMap contactsMap = AlphabetizedContactMap();
+    for (Contact contact in _contacts) {
+      final String lastInitial = contact.lastName[0].toUpperCase();
+      if (contactsMap.containsKey(lastInitial)) {
+        contactsMap[lastInitial]!.add(contact);
+      } else {
+        contactsMap[lastInitial] = [contact];
+      }
+    }
+    return contactsMap;
+  }
+}
+
+class ContactGroupsModel extends ChangeNotifier {
+  final List<ContactGroup> _lists = generateSeedData();
+
+  List<ContactGroup> get lists => _lists;
+
+  ContactGroup findContactList(int id) {
+    return lists[id];
+  }
+}
+
+final allPhone = ContactGroup(
+  id: 0,
+  permanent: true,
+  label: 'All iPhone',
+  title: 'iPhone',
+  contacts: allContacts.toList(),
+);
+
+final friends = ContactGroup(
+  id: 1,
+  label: 'Friends',
+  contacts: [allContacts.elementAt(3)],
+);
+
+final work = ContactGroup(id: 2, label: 'Work');
+
+List<ContactGroup> generateSeedData() {
+  return [allPhone, friends, work];
+}

rolodex/lib/data/contact_list.dart

@@ -1,44 +0,0 @@
-// Copyright 2018 The Flutter team. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'package:flutter/cupertino.dart';
-
-import 'contact.dart';
-
-class ContactList {
-  ContactList({
-    required this.id,
-    required this.label,
-    this.permanent = false,
-    String? title,
-  }) : title = title ?? label;
-
-  final int id;
-
-  final bool permanent;
-
-  final String label;
-
-  final String title;
-
-  final List<Contact> contacts = [];
-}
-
-class ContactListsModel extends ChangeNotifier {
-  final List<ContactList> _lists = generateSeedData();
-
-  List<ContactList> get lists => _lists;
-
-  ContactList findContactList(int id) {
-    return lists[id];
-  }
-}
-
-List<ContactList> generateSeedData() {
-  return [
-    ContactList(id: 0, permanent: true, label: 'All iPhone', title: 'iPhone'),
-    ContactList(id: 1, label: 'Friends'),
-    ContactList(id: 2, label: 'Work'),
-  ];
-}

rolodex/lib/main.dart

@@ -5,9 +5,9 @@
 import 'package:flutter/cupertino.dart';
 import 'package:provider/provider.dart';
 
-import 'data/contact_list.dart';
+import 'data/contact_group.dart';
 import 'screens/contacts.dart';
-import 'screens/lists.dart';
+import 'screens/contact_groups.dart';
 
 void main() {
   runApp(const RolodexApp());
@@ -19,16 +19,22 @@ class RolodexApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ChangeNotifierProvider(
-      create: (context) => ContactListsModel(),
+      create: (context) => ContactGroupsModel(),
       child: CupertinoApp(
         title: 'Rolodex',
+        theme: CupertinoThemeData(
+          barBackgroundColor: CupertinoDynamicColor.withBrightness(
+            color: Color(0xFFF9F9F9),
+            darkColor: Color(0xFF1D1D1D),
+          ),
+        ),
         initialRoute: '/contacts',
         onGenerateInitialRoutes: (initialRoute) {
           return [
             CupertinoPageRoute(
               title: 'Lists',
               builder: (BuildContext context) {
-                return ListsPage();
+                return ContactGroupsPage();
               },
             ),
             CupertinoPageRoute(

rolodex/lib/screens/contact_groups.dart

@@ -4,11 +4,30 @@
 
 import 'package:flutter/cupertino.dart';
 import 'package:provider/provider.dart';
-import 'package:rolodex/data/contact_list.dart';
+import 'package:rolodex/data/contact.dart';
+import 'package:rolodex/data/contact_group.dart';
 import 'contacts.dart';
 
-class ListsPage extends StatelessWidget {
-  const ListsPage({super.key});
+class ContactGroupsPage extends StatelessWidget {
+  const ContactGroupsPage({super.key});
+
+  Widget _buildTrailing(List<Contact> contacts, BuildContext context) {
+    final TextStyle style = CupertinoTheme.of(
+      context,
+    ).textTheme.textStyle.copyWith(color: CupertinoColors.systemGrey);
+
+    return Row(
+      spacing: 5,
+      children: [
+        Text(contacts.length.toString(), style: style),
+        Icon(
+          CupertinoIcons.forward,
+          color: CupertinoColors.systemGrey3,
+          size: 18,
+        ),
+      ],
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -17,6 +36,8 @@ class ListsPage extends StatelessWidget {
       child: CustomScrollView(
         slivers: [
           CupertinoSliverNavigationBar(
+            padding: EdgeInsetsDirectional.only(start: 8, end: 16),
+            stretch: true,
             leading: CupertinoButton(
               padding: EdgeInsets.zero,
               onPressed: () {},
@@ -30,19 +51,31 @@ class ListsPage extends StatelessWidget {
             ),
           ),
           SliverFillRemaining(
-            child: Consumer<ContactListsModel>(
+            child: Consumer<ContactGroupsModel>(
               builder: (context, contactLists, child) {
+                const groupIcon = Icon(
+                  CupertinoIcons.group,
+                  weight: 900,
+                  size: 32,
+                );
+
+                const pairIcon = Icon(
+                  CupertinoIcons.person_2,
+                  weight: 900,
+                  size: 24,
+                );
+
                 return CupertinoListSection.insetGrouped(
                   header: Text('iPhone'),
                   children: [
-                    for (ContactList contactList in contactLists.lists)
+                    for (ContactGroup contactList in contactLists.lists)
                       CupertinoListTile(
-                        leading: Icon(
-                          contactList.id == 0
-                              ? CupertinoIcons.group
-                              : CupertinoIcons.person_2,
-                        ),
+                        leading: contactList.id == 0 ? groupIcon : pairIcon,
+                        leadingSize: 32,
+                        leadingToTitle: 9,
+                        padding: EdgeInsets.symmetric(horizontal: 13.0),
                         title: Text(contactList.label),
+                        trailing: _buildTrailing(contactList.contacts, context),
                         onTap:
                             () => Navigator.of(context).push(
                               CupertinoPageRoute(

rolodex/lib/screens/contacts.dart

@@ -4,7 +4,8 @@
 
 import 'package:flutter/cupertino.dart';
 import 'package:provider/provider.dart';
-import 'package:rolodex/data/contact_list.dart';
+import 'package:rolodex/data/contact.dart';
+import 'package:rolodex/data/contact_group.dart';
 
 class ContactListsPage extends StatelessWidget {
   const ContactListsPage({super.key, required this.listId});
@@ -14,20 +15,42 @@ class ContactListsPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return CupertinoPageScaffold(
-      child: Consumer<ContactListsModel>(
-        builder: (context, contactLists, child) {
-          final ContactList contacts = contactLists.findContactList(listId);
+      child: Consumer<ContactGroupsModel>(
+        builder: (context, contactGroups, child) {
+          final ContactGroup contactList = contactGroups.findContactList(
+            listId,
+          );
+          final AlphabetizedContactMap contacts =
+              contactList.alphabetizedContacts;
           return CustomScrollView(
             slivers: [
-              CupertinoSliverNavigationBar(
+              CupertinoSliverNavigationBar.search(
+                padding: EdgeInsetsDirectional.only(start: 8, end: 6),
+                transitionBetweenRoutes: false,
                 automaticallyImplyLeading: true,
-                largeTitle: Text(contacts.title),
+                largeTitle: Text(contactList.title),
                 trailing: CupertinoButton(
+                  padding: EdgeInsets.zero,
                   onPressed: () {},
-                  child: Icon(CupertinoIcons.add),
+                  child: Icon(CupertinoIcons.add, size: 25),
+                ),
+                bottomMode: NavigationBarBottomMode.always,
+                searchField: CupertinoSearchTextField(
+                  suffixIcon: Icon(CupertinoIcons.mic_fill),
+                  suffixMode: OverlayVisibilityMode.always,
+                ),
+              ),
+              SliverList.list(
+                children: [
+                  SizedBox(height: 20),
+                  ...contacts.keys.map(
+                    (String initial) => ContactListSection(
+                      lastInitial: initial,
+                      contacts: contacts[initial]!,
                     ),
                   ),
-              SliverFillRemaining(child: Center(child: Text('Contacts page'))),
+                ],
+              ),
             ],
           );
         },
@@ -35,3 +58,67 @@ class ContactListsPage extends StatelessWidget {
     );
   }
 }
+
+// Section of contacts grouped under the first letter of their last name.
+class ContactListSection extends StatelessWidget {
+  const ContactListSection({
+    super.key,
+    required this.lastInitial,
+    required this.contacts,
+  });
+
+  final String lastInitial;
+
+  final List<Contact> contacts;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsetsDirectional.fromSTEB(20, 0, 20, 0),
+      child: Column(
+        children: [
+          SizedBox(height: 15),
+          Align(
+            alignment: AlignmentDirectional.bottomStart,
+            child: Text(
+              lastInitial,
+              style: TextStyle(
+                color: CupertinoColors.systemGrey,
+                fontSize: 15,
+                fontWeight: FontWeight.w700,
+              ),
+            ),
+          ),
+          CupertinoListSection(
+            backgroundColor: CupertinoColors.systemBackground,
+            dividerMargin: 0,
+            additionalDividerMargin: 0,
+            topMargin: 4,
+            children:
+                contacts.map((contact) {
+                  return CupertinoListTile(
+                    padding: EdgeInsetsDirectional.only(start: 0.0, end: 0.0),
+                    title: RichText(
+                      text: TextSpan(
+                        text: "${contact.firstName} ",
+                        style: DefaultTextStyle.of(context).style,
+                        children: <TextSpan>[
+                          if (contact.middleName != null)
+                            TextSpan(text: "${contact.middleName} "),
+                          TextSpan(
+                            text: contact.lastName,
+                            style: TextStyle(fontWeight: FontWeight.w600),
+                          ),
+                          if (contact.suffix != null)
+                            TextSpan(text: " ${contact.suffix}"),
+                        ],
+                      ),
+                    ),
+                  );
+                }).toList(),
+          ),
+        ],
+      ),
+    );
+  }
+}

rolodex/test/widget_test.dart

@@ -1,18 +1,19 @@
 import 'package:flutter_test/flutter_test.dart';
 
 import 'package:rolodex/main.dart';
+import 'package:rolodex/screens/contacts.dart';
 
 void main() {
   testWidgets('Opens on all contacts page', (WidgetTester tester) async {
     await tester.pumpWidget(const RolodexApp());
 
-    expect(find.text('Contacts page'), findsOneWidget);
+    expect(find.byType(ContactListsPage), findsOneWidget);
     expect(find.text('Add List'), findsNothing);
 
     await tester.tap(find.text('Lists'));
     await tester.pumpAndSettle();
 
     expect(find.text('Add List'), findsOneWidget);
-    expect(find.text('Contacts page'), findsNothing);
+    expect(find.byType(ContactListsPage), findsNothing);
   });
 }