[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/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,
                 ),
               ),
-              SliverFillRemaining(child: Center(child: Text('Contacts page'))),
+              SliverList.list(
+                children: [
+                  SizedBox(height: 20),
+                  ...contacts.keys.map(
+                    (String initial) => ContactListSection(
+                      lastInitial: initial,
+                      contacts: contacts[initial]!,
+                    ),
+                  ),
+                ],
+              ),
             ],
           );
         },
@@ -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(),
+          ),
+        ],
+      ),
+    );
+  }
+}