[Presentation] Calculate the cross axis count depending on the device…

… type and orientation
Wolfteam · Jul 12, 2021 · b2fffd7 · b2fffd7
1 parent 300f679
commit b2fffd7
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 7 deletions.
diff --git a/lib/presentation/artifacts/artifacts_page.dart b/lib/presentation/artifacts/artifacts_page.dart
@@ -9,6 +9,7 @@ import 'package:genshindb/presentation/shared/sliver_nothing_found.dart';
 import 'package:genshindb/presentation/shared/sliver_page_filter.dart';
 import 'package:genshindb/presentation/shared/sliver_scaffold_with_fab.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
+import 'package:genshindb/presentation/shared/utils/grid_utils.dart';
 
 import 'widgets/artifact_bottom_sheet.dart';
 import 'widgets/artifact_card.dart';
@@ -79,7 +80,7 @@ class _ArtifactsPageState extends State<ArtifactsPage> with AutomaticKeepAliveCl
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: isPortrait ? 2 : 3,
+        crossAxisCount: GridUtils.getCrossAxisCount(context),
         itemBuilder: (ctx, index) => ArtifactCard.item(item: artifacts[index], isInSelectionMode: widget.isInSelectionMode),
         itemCount: artifacts.length,
         crossAxisSpacing: isPortrait ? 10 : 5,

diff --git a/lib/presentation/characters/characters_page.dart b/lib/presentation/characters/characters_page.dart
@@ -9,6 +9,7 @@ import 'package:genshindb/presentation/shared/sliver_nothing_found.dart';
 import 'package:genshindb/presentation/shared/sliver_page_filter.dart';
 import 'package:genshindb/presentation/shared/sliver_scaffold_with_fab.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
+import 'package:genshindb/presentation/shared/utils/grid_utils.dart';
 
 import 'widgets/character_bottom_sheet.dart';
 import 'widgets/character_card.dart';
@@ -82,12 +83,12 @@ class _CharactersPageState extends State<CharactersPage> with AutomaticKeepAlive
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: isPortrait ? 2 : 3,
+        crossAxisCount: GridUtils.getCrossAxisCount(context),
         itemBuilder: (ctx, index) => CharacterCard.item(char: characters[index], isInSelectionMode: widget.isInSelectionMode),
         itemCount: characters.length,
         crossAxisSpacing: isPortrait ? 10 : 5,
         mainAxisSpacing: 5,
-        staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
+        staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
       ),
     );
   }

diff --git a/lib/presentation/home/home_page.dart b/lib/presentation/home/home_page.dart
@@ -82,8 +82,8 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin<
               ),
             ),
           ),
-          if (size.deviceScreenType == DeviceScreenType.mobile) SliverMainTitle(title: s.settings),
-          if (size.deviceScreenType == DeviceScreenType.mobile) const SliverToBoxAdapter(child: SettingsCard(iconToTheLeft: true)),
+          if (size.isMobile) SliverMainTitle(title: s.settings),
+          if (size.isMobile) const SliverToBoxAdapter(child: SettingsCard(iconToTheLeft: true)),
         ],
       ),
     );

diff --git a/lib/presentation/main_tab_page.dart b/lib/presentation/main_tab_page.dart
@@ -69,7 +69,7 @@ class _MainTabPageState extends State<MainTabPage> with SingleTickerProviderStat
       builder: (ctx) => WillPopScope(
         onWillPop: () => handleWillPop(),
         child: ResponsiveBuilder(
-          builder: (ctx, size) => size.deviceScreenType == DeviceScreenType.desktop || size.deviceScreenType == DeviceScreenType.tablet
+          builder: (ctx, size) => size.isDesktop || size.isTablet
               ? DesktopTabletScaffold(defaultIndex: _defaultIndex, tabController: _tabController)
               : MobileScaffold(defaultIndex: _defaultIndex, tabController: _tabController),
         ),

diff --git a/lib/presentation/shared/utils/grid_utils.dart b/lib/presentation/shared/utils/grid_utils.dart
@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+
+class GridUtils {
+  static int getCrossAxisCount(BuildContext context) {
+    final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
+    final size = MediaQuery.of(context).size;
+    final deviceType = getDeviceType(size);
+    final refinedSize = getRefinedSize(size);
+    int crossAxisCount = 2;
+    switch (deviceType) {
+      case DeviceScreenType.mobile:
+        crossAxisCount = isPortrait ? 2 : 3;
+        break;
+      case DeviceScreenType.tablet:
+        crossAxisCount = isPortrait ? 3 : 5;
+        break;
+      case DeviceScreenType.desktop:
+        switch (refinedSize) {
+          case RefinedSize.small:
+            crossAxisCount = 2;
+            break;
+          case RefinedSize.normal:
+            crossAxisCount = 3;
+            break;
+          case RefinedSize.large:
+            crossAxisCount = 5;
+            break;
+          case RefinedSize.extraLarge:
+            crossAxisCount = 7;
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+    return crossAxisCount;
+  }
+}
diff --git a/lib/presentation/weapons/weapons_page.dart b/lib/presentation/weapons/weapons_page.dart
@@ -9,6 +9,7 @@ import 'package:genshindb/presentation/shared/sliver_nothing_found.dart';
 import 'package:genshindb/presentation/shared/sliver_page_filter.dart';
 import 'package:genshindb/presentation/shared/sliver_scaffold_with_fab.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
+import 'package:genshindb/presentation/shared/utils/grid_utils.dart';
 
 import 'widgets/weapon_bottom_sheet.dart';
 import 'widgets/weapon_card.dart';
@@ -82,7 +83,7 @@ class _WeaponsPageState extends State<WeaponsPage> with AutomaticKeepAliveClient
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: isPortrait ? 2 : 3,
+        crossAxisCount: GridUtils.getCrossAxisCount(context),
         itemBuilder: (ctx, index) {
           final weapon = weapons[index];
           return WeaponCard(