feat: populating the contact stuff

lib/src/ui/home/widgets/contact_item.dart

@@ -10,24 +10,31 @@ class ContactItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListTile(
-        contentPadding:
-            EdgeInsets.only(top: 0.0, left: 20.0, right: 20.0, bottom: 0.0),
-        leading: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
-          /*Icon(Icons.star, color: Theme.of(context).primaryColorDark),*/
-          Text("A",
-              style: TextStyle(
-                  fontSize: 16.0,
-                  fontWeight: FontWeight.w700,
-                  color: Theme.of(context).primaryColorDark)),
-          UserAvatar(
-              user: user, radius: 22.0, padding: EdgeInsets.only(left: 20.0))
-        ]),
-        title: Text(user.firstName + " " + user.lastName,
-            style: Theme.of(context).textTheme.display2,
-            overflow: TextOverflow.ellipsis),
-        subtitle: Text("Last seen just now",
-            style: Theme.of(context).textTheme.subtitle),
-        onTap: () => {});
+    return Container(
+        padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
+        child: Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: <Widget>[
+              UserAvatar(
+                  user: user,
+                  radius: 22.0,
+                  padding: EdgeInsets.only(left: 20.0)),
+              Padding(
+                  padding: EdgeInsets.only(left: 15.0),
+                  child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        Text(user.firstName + " " + user.lastName,
+                            style: Theme.of(context).textTheme.display2,
+                            overflow: TextOverflow.ellipsis),
+                        Padding(
+                            padding: EdgeInsets.only(top: 2),
+                            child: Text("Last seen x ago",
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .subtitle
+                                    .copyWith(color: Color(0xFF455A64)))),
+                      ]))
+            ]));
   }
 }

lib/src/ui/home/widgets/contact_view.dart

@@ -1,4 +1,5 @@
 import "package:flutter/material.dart";
+import 'package:sticky_headers/sticky_headers.dart';
 
 import "../../../models/user_model.dart";
 import "../../../blocs/contact_bloc.dart";
@@ -34,12 +35,73 @@ class _ContactViewState extends State<ContactView> {
   }
 
   Widget buildList(AsyncSnapshot<List<User>> snapshot) {
-    return ListView.builder(
-      padding: EdgeInsets.only(top: 0.0),
-      itemCount: snapshot.data.length,
-      itemBuilder: (context, index) {
-        return ContactItem(user: snapshot.data[index]);
-      },
-    );
+    final Map<String, List<User>> sortedList = {
+      "A": null,
+      "B": null,
+      "C": null,
+      "D": null,
+      "E": null,
+      "F": null,
+      "G": null,
+      "H": null,
+      "I": null,
+      "J": null,
+      "K": null,
+      "L": null,
+      "M": null,
+      "N": null,
+      "O": null,
+      "P": null,
+      "Q": null,
+      "R": null,
+      "S": null,
+      "T": null,
+      "U": null,
+      "V": null,
+      "W": null,
+      "X": null,
+      "Y": null,
+      "Z": null
+    };
+
+    // Sort the list into alphabets
+    sortedList.forEach((letter, list) {
+      sortedList[letter] = snapshot.data
+          .where((user) => user.firstName.startsWith(letter))
+          .toList();
+    });
+
+    print(sortedList);
+
+    return ListView(
+        children: sortedList.entries.map<Widget>((entry) {
+      if (entry.value.length == 0) {
+        return Container();
+      }
+
+      return Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
+        StickyHeader(
+            header: Container(
+              height: 25.0,
+              color: Colors.grey[200],
+              padding: EdgeInsets.symmetric(horizontal: 20.0),
+              alignment: Alignment.centerLeft,
+              child: Text(
+                entry.key,
+                style: TextStyle(
+                    fontSize: 16.0,
+                    fontWeight: FontWeight.w700,
+                    color: Theme.of(context).primaryColorDark),
+              ),
+            ),
+            content: ListView.builder(
+                padding: EdgeInsets.only(top: 0.0),
+                shrinkWrap: true,
+                itemCount: entry.value.length,
+                itemBuilder: (context, index) {
+                  return ContactItem(user: entry.value[index]);
+                }))
+      ]);
+    }).toList());
   }
 }

lib/src/ui/home/widgets/conversation_item.dart

@@ -75,8 +75,10 @@ class _ConversationItemState extends State<ConversationItem> {
                                     "I might have forgotten to close the windows",
                                     maxLines: 2,
                                     overflow: TextOverflow.ellipsis,
-                                    style:
-                                        Theme.of(context).textTheme.subtitle)),
+                                    style: Theme.of(context)
+                                        .textTheme
+                                        .subtitle
+                                        .copyWith(color: Color(0xFF455A64)))),
                             StreamBuilder(
                                 stream: bloc.members,
                                 builder: (context,

pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
   shared_preferences: ^0.5.1
   sqflite: ^1.1.0
   eventsource: ^0.2.1
+  sticky_headers: ^0.1.7
 
 dev_dependencies:
   flutter_test: