Fixed griditem overlap in library playlist section #239

anandnet · Aug 20, 2024 · b649da0 · b649da0
1 parent 2f24c97
commit b649da0
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 42 deletions.
diff --git a/lib/ui/screens/Library/library.dart b/lib/ui/screens/Library/library.dart
@@ -104,10 +104,10 @@ class PlaylistNAlbumLibraryWidget extends StatelessWidget {
     final libralbumCntrller = Get.find<LibraryAlbumsController>();
     final librplstCntrller = Get.find<LibraryPlaylistsController>();
     final settingscrnController = Get.find<SettingsScreenController>();
-    var size = MediaQuery.of(context).size;
+    final size = MediaQuery.of(context).size;
 
-    const double itemHeight = 220;
-    const double itemWidth = 180;
+    const double itemHeight = 180;
+    const double itemWidth = 130;
     final topPadding = context.isLandscape ? 50.0 : 90.0;
 
     return Padding(
@@ -178,27 +178,42 @@ class PlaylistNAlbumLibraryWidget extends StatelessWidget {
               () => (isAlbumContent
                       ? libralbumCntrller.libraryAlbums.isNotEmpty
                       : librplstCntrller.libraryPlaylists.isNotEmpty)
-                  ? GridView.builder(
-                      physics: const BouncingScrollPhysics(),
-                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                        crossAxisCount: ((size.width - 60) / itemWidth).ceil(),
-                        childAspectRatio: (itemWidth / itemHeight),
-                      ),
-                      controller: ScrollController(keepScrollOffset: false),
-                      shrinkWrap: true,
-                      scrollDirection: Axis.vertical,
-                      padding: const EdgeInsets.only(bottom: 200, top: 10),
-                      itemCount: isAlbumContent
-                          ? libralbumCntrller.libraryAlbums.length
-                          : librplstCntrller.libraryPlaylists.length,
-                      itemBuilder: (context, index) => Center(
-                            child: ContentListItem(
-                              content: isAlbumContent
-                                  ? libralbumCntrller.libraryAlbums[index]
-                                  : librplstCntrller.libraryPlaylists[index],
-                              isLibraryItem: true,
+                  ? LayoutBuilder(builder: (context, constraints) {
+                    //Fix for grid in mobile screen 
+                      final availableWidth = constraints.maxWidth > 300 &&
+                              constraints.maxWidth < 394
+                          ? 310.0
+                          : constraints.maxWidth;
+                      int columns = (availableWidth / itemWidth).floor();
+                      return SizedBox(
+                        width: availableWidth,
+                        child: GridView.builder(
+                            physics: const BouncingScrollPhysics(),
+                            gridDelegate:
+                                SliverGridDelegateWithFixedCrossAxisCount(
+                              crossAxisCount: columns,
+                              childAspectRatio: (itemWidth / itemHeight),
                             ),
-                          ))
+                            controller:
+                                ScrollController(keepScrollOffset: false),
+                            shrinkWrap: true,
+                            scrollDirection: Axis.vertical,
+                            padding:
+                                const EdgeInsets.only(bottom: 200, top: 10),
+                            itemCount: isAlbumContent
+                                ? libralbumCntrller.libraryAlbums.length
+                                : librplstCntrller.libraryPlaylists.length,
+                            itemBuilder: (context, index) => Center(
+                                  child: ContentListItem(
+                                    content: isAlbumContent
+                                        ? libralbumCntrller.libraryAlbums[index]
+                                        : librplstCntrller
+                                            .libraryPlaylists[index],
+                                    isLibraryItem: true,
+                                  ),
+                                )),
+                      );
+                    })
                   : Center(
                       child: Text(
                       "noBookmarks".tr,

diff --git a/lib/ui/widgets/content_list_widget_item.dart b/lib/ui/widgets/content_list_widget_item.dart
@@ -23,8 +23,9 @@ class ContentListItem extends StatelessWidget {
             id: ScreenNavigationSetup.id, arguments: [isAlbum, content, false]);
       },
       child: Container(
-        width: 120,
-        padding: const EdgeInsets.all(0),
+        width: 130,
+        height: 180,
+        padding: const EdgeInsets.symmetric(horizontal: 5),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -91,23 +92,30 @@ class ContentListItem extends StatelessWidget {
                           size: 40,
                         ))),
             const SizedBox(height: 5),
-            Text(
-              content.title,
-              // overflow: TextOverflow.ellipsis,
-              maxLines: 2,
-              style: Theme.of(context).textTheme.titleMedium,
-            ),
-            Text(
-              isAlbum
-                  ? isLibraryItem
-                      ? ""
-                      : "${content.artists[0]['name'] ?? ""} | ${content.year ?? ""}"
-                  : isLibraryItem
-                      ? ""
-                      : content.description ?? "",
-              maxLines: 1,
-              style: Theme.of(context).textTheme.titleSmall,
-            ),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    content.title,
+                    // overflow: TextOverflow.ellipsis,
+                    maxLines: 2,
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                  Text(
+                    isAlbum
+                        ? isLibraryItem
+                            ? ""
+                            : "${content.artists[0]['name'] ?? ""} | ${content.year ?? ""}"
+                        : isLibraryItem
+                            ? ""
+                            : content.description ?? "",
+                    maxLines: 1,
+                    style: Theme.of(context).textTheme.titleSmall,
+                  ),
+                ],
+              ),
+            )
           ],
         ),
       ),