From b2fffd73f5dd43f7c879e15f7ec303e379b304e7 Mon Sep 17 00:00:00 2001 From: Efrain Date: Sun, 11 Jul 2021 21:41:38 -0500 Subject: [PATCH] [Presentation] Calculate the cross axis count depending on the device type and orientation --- .../artifacts/artifacts_page.dart | 3 +- .../characters/characters_page.dart | 5 ++- lib/presentation/home/home_page.dart | 4 +- lib/presentation/main_tab_page.dart | 2 +- lib/presentation/shared/utils/grid_utils.dart | 39 +++++++++++++++++++ lib/presentation/weapons/weapons_page.dart | 3 +- 6 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 lib/presentation/shared/utils/grid_utils.dart diff --git a/lib/presentation/artifacts/artifacts_page.dart b/lib/presentation/artifacts/artifacts_page.dart index 5e0c7f0bf..f8409275c 100644 --- 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 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 index 4bb80bfe8..01040a6a8 100644 --- 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 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 index 4385e7833..0b7599704 100644 --- a/lib/presentation/home/home_page.dart +++ b/lib/presentation/home/home_page.dart @@ -82,8 +82,8 @@ class _HomePageState extends State 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 index 6d66aaef1..e8b3737ed 100644 --- a/lib/presentation/main_tab_page.dart +++ b/lib/presentation/main_tab_page.dart @@ -69,7 +69,7 @@ class _MainTabPageState extends State 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 new file mode 100644 index 000000000..bf681e526 --- /dev/null +++ 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 index 79c7bdefa..2a6259879 100644 --- 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 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(