Redesign the people browser

app/lib/widget/people_browser.dart

@@ -108,16 +108,14 @@ class _PeopleBrowserState extends State<PeopleBrowser> {
                     child: LinearProgressIndicator(),
                   ),
                 ),
-              SliverPadding(
+              SliverStaggeredGrid.extentBuilder(
-                padding: const EdgeInsets.symmetric(horizontal: 16),
-                sliver: SliverStaggeredGrid.extentBuilder(
                 maxCrossAxisExtent: 160,
                 mainAxisSpacing: 8,
+                crossAxisSpacing: 8,
                 itemCount: _items.length,
                 itemBuilder: _buildItem,
                 staggeredTileBuilder: (_) => const StaggeredTile.count(1, 1),
               ),
-              ),
             ],
           ),
         ),
@@ -208,26 +206,38 @@ class _PersonListItem extends _ListItem {
 
   @override
   buildWidget(BuildContext context) {
-    final content = Padding(
+    Widget content = Stack(
-      padding: const EdgeInsets.all(4),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-          Expanded(
+        _buildFaceImage(context),
-            child: Center(
+        Positioned(
-              child: AspectRatio(
+          bottom: 0,
-                aspectRatio: 1,
+          left: 0,
-                child: _buildFaceImage(context),
+          right: 0,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                height: 24,
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      Colors.black.withOpacity(0),
+                      Colors.black.withOpacity(.55),
+                    ],
                   ),
                 ),
               ),
-          const SizedBox(height: 8),
+              Container(
-          Align(
+                color: Colors.black.withOpacity(.55),
-            alignment: Alignment.center,
+                constraints: const BoxConstraints(minWidth: double.infinity),
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 4),
                 child: Text(
-              name + "\n",
+                  name,
-              style: Theme.of(context).textTheme.bodyText1!.copyWith(
+                  style: TextStyle(
-                    color: AppTheme.getPrimaryTextColor(context),
+                    color: AppTheme.primaryTextColorDark,
+                    fontWeight: FontWeight.bold,
                   ),
                   textAlign: TextAlign.center,
                   maxLines: 2,
@@ -236,21 +246,41 @@ class _PersonListItem extends _ListItem {
               ),
             ],
           ),
+        ),
+      ],
     );
     if (onTap != null) {
-      return InkWell(
+      content = Stack(
+        fit: StackFit.expand,
+        children: [
+          content,
+          Positioned.fill(
+            child: Material(
+              type: MaterialType.transparency,
+              child: InkWell(
                 onTap: onTap,
-        child: content,
+              ),
+            ),
+          ),
+        ],
       );
-    } else {
-      return content;
     }
+    return Padding(
+      padding: const EdgeInsets.all(4),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(12),
+        child: Container(
+          color: AppTheme.getListItemBackgroundColor(context),
+          constraints: const BoxConstraints.expand(),
+          child: content,
+        ),
+      ),
+    );
   }
 
   Widget _buildFaceImage(BuildContext context) {
-    Widget cover;
     try {
-      cover = FittedBox(
+      return FittedBox(
         clipBehavior: Clip.hardEdge,
         fit: BoxFit.cover,
         child: CachedNetworkImage(
@@ -269,22 +299,15 @@ class _PersonListItem extends _ListItem {
         ),
       );
     } catch (_) {
-      cover = Icon(
+      return Center(
+        child: Icon(
           Icons.person,
           color: Colors.white.withOpacity(.8),
-        size: 64,
+          size: 80,
-      );
-    }
-
-    return ClipRRect(
-      borderRadius: BorderRadius.circular(128),
-      child: Container(
-        color: AppTheme.getListItemBackgroundColor(context),
-        constraints: const BoxConstraints.expand(),
-        child: cover,
         ),
       );
     }
+  }
 
   final Account account;
   final String name;