💄 Update styling of realm list

2025-08-17 13:35:03 +08:00
parent 412dcfa62a
commit 31b2de2e46
2 changed files with 85 additions and 23 deletions
--- a/lib/widgets/realm/realm_list_tile.dart
+++ b/lib/widgets/realm/realm_list_tile.dart
@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:go_router/go_router.dart';
+import 'package:island/models/realm.dart';
+import 'package:island/widgets/content/cloud_files.dart';
+import 'package:material_symbols_icons/symbols.dart';
+import 'package:styled_widget/styled_widget.dart';
+
+class RealmListTile extends StatelessWidget {
+  const RealmListTile({super.key, required this.realm});
+
+  final SnRealm realm;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: EdgeInsets.zero,
+      child: InkWell(
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            AspectRatio(
+              aspectRatio: 16 / 7,
+              child: Stack(
+                clipBehavior: Clip.none,
+                fit: StackFit.expand,
+                children: [
+                  ClipRRect(
+                    borderRadius: const BorderRadius.all(Radius.circular(8)),
+                    child: Container(
+                      color: Theme.of(context).colorScheme.surfaceContainer,
+                      child:
+                          realm.background == null
+                              ? const SizedBox.shrink()
+                              : CloudImageWidget(file: realm.background),
+                    ),
+                  ),
+                  Positioned(
+                    bottom: -30,
+                    left: 18,
+                    child: ProfilePictureWidget(
+                      fileId: realm.picture?.id,
+                      fallbackIcon: Symbols.group,
+                      radius: 24,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const Gap(20 + 12),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  realm.name,
+                ).textStyle(Theme.of(context).textTheme.titleMedium!),
+                Text(
+                  realm.description,
+                ).textStyle(Theme.of(context).textTheme.bodySmall!),
+              ],
+            ).padding(horizontal: 24, bottom: 14),
+          ],
+        ),
+        onTap: () {
+          context.pushNamed(
+            'realmDetail',
+            pathParameters: {'slug': realm.slug},
+          );
+        },
+      ),
+    );
+  }
+}