chore: style grid

2024-09-13 04:00:50 +05:30
parent 419d3669a2
commit 53974e7276
23 changed files with 344 additions and 127 deletions
@@ -3,8 +3,13 @@ import 'package:immich_mobile/domain/interfaces/asset.interface.dart';
 import 'package:immich_mobile/domain/models/render_list_element.model.dart';
 import 'package:immich_mobile/presentation/components/image/immich_image.widget.dart';
 import 'package:immich_mobile/service_locator.dart';
+import 'package:immich_mobile/utils/extensions/async_snapshot.extension.dart';
+import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
+import 'package:material_symbols_icons/symbols.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

+part 'immich_asset_grid_header.widget.dart';
+
 class ImAssetGrid extends StatelessWidget {
  const ImAssetGrid({super.key});

@@ -21,11 +26,14 @@ class ImAssetGrid extends StatelessWidget {
        final elements = renderList.elements;
        return ScrollablePositionedList.builder(
          itemCount: elements.length,
+          addAutomaticKeepAlives: false,
+          minCacheExtent: 100,
          itemBuilder: (_, sectionIndex) {
            final section = elements[sectionIndex];

            return switch (section) {
-              RenderListMonthHeaderElement() => Text(section.header),
+              RenderListMonthHeaderElement() =>
+                _MonthHeader(text: section.header),
              RenderListDayHeaderElement() => Text(section.header),
              RenderListAssetElement() => FutureBuilder(
                  future: renderList.loadAssets(
@@ -34,12 +42,11 @@ class ImAssetGrid extends StatelessWidget {
                  ),
                  builder: (_, assetsSnap) {
                    final assets = assetsSnap.data;
-                    if (assets == null) {
-                      return const SizedBox.shrink();
-                    }
                    return GridView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
+                      addAutomaticKeepAlives: false,
+                      cacheExtent: 100,
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
@@ -47,8 +54,10 @@ class ImAssetGrid extends StatelessWidget {
                      itemBuilder: (_, i) {
                        return SizedBox.square(
                          dimension: 200,
-                          // ignore: avoid-unsafe-collection-methods
-                          child: ImImage(assets.elementAt(i)),
+                          child: assetsSnap.isWaiting || assets == null
+                              ? Container(color: Colors.grey)
+                              // ignore: avoid-unsafe-collection-methods
+                              : ImImage(assets[i]),
                        );
                      },
                      itemCount: section.assetCount,
@@ -0,0 +1,43 @@
+part of 'immich_asset_grid.widget.dart';
+
+class _HeaderText extends StatelessWidget {
+  final String text;
+  final TextStyle? style;
+
+  const _HeaderText({required this.text, this.style});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 32.0, left: 16.0, right: 12.0),
+      child: Row(
+        children: [
+          Text(text, style: style),
+          const Spacer(),
+          IconButton(
+            // ignore: no-empty-block
+            onPressed: () {},
+            icon: Icon(
+              Symbols.check_circle_rounded,
+              color: context.colorScheme.onSurfaceVariant,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _MonthHeader extends StatelessWidget {
+  final String text;
+
+  const _MonthHeader({required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return _HeaderText(
+      text: text,
+      style: context.textTheme.bodyLarge?.copyWith(fontSize: 24.0),
+    );
+  }
+}