[Presentation] Consider the device screen size on tablets

Wolfteam · Jul 18, 2021 · 3dc7e56 · 3dc7e56
1 parent 0b11b98
commit 3dc7e56
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 10 deletions.
diff --git a/lib/presentation/artifacts/artifacts_page.dart b/lib/presentation/artifacts/artifacts_page.dart
@@ -80,7 +80,7 @@ class _ArtifactsPageState extends State<ArtifactsPage> with AutomaticKeepAliveCl
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context),
+        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, isOnMainPage: !widget.isInSelectionMode),
         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
@@ -83,7 +83,7 @@ class _CharactersPageState extends State<CharactersPage> with AutomaticKeepAlive
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context),
+        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, isOnMainPage: !widget.isInSelectionMode),
         itemBuilder: (ctx, index) => CharacterCard.item(char: characters[index], isInSelectionMode: widget.isInSelectionMode),
         itemCount: characters.length,
         crossAxisSpacing: isPortrait ? 10 : 5,

diff --git a/lib/presentation/shared/app_webview.dart b/lib/presentation/shared/app_webview.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:genshindb/generated/l10n.dart';
 import 'package:genshindb/presentation/shared/page_message.dart';
+import 'package:responsive_builder/responsive_builder.dart';
 
 import 'loading.dart';
 
@@ -39,7 +40,7 @@ class _AppWebViewState extends State<AppWebView> {
     if (widget.isLoading) {
       return const Loading();
     }
-
+    final device = getDeviceType(MediaQuery.of(context).size);
     return Stack(
       children: [
         Scaffold(
@@ -51,7 +52,8 @@ class _AppWebViewState extends State<AppWebView> {
                 useHybridComposition: true,
               ),
               crossPlatform: InAppWebViewOptions(
-                preferredContentMode: UserPreferredContentMode.MOBILE,
+                preferredContentMode: device == DeviceScreenType.mobile ? UserPreferredContentMode.MOBILE : UserPreferredContentMode.RECOMMENDED,
+                //This may fail on weird devices (chinese ones ?)...
                 userAgent: widget.userAgent,
                 transparentBackground: true,
               ),

diff --git a/lib/presentation/shared/utils/size_utils.dart b/lib/presentation/shared/utils/size_utils.dart
@@ -7,6 +7,7 @@ class SizeUtils {
     int? forPortrait,
     int? forLandscape,
     bool itemIsSmall = false,
+    bool isOnMainPage = false,
   }) {
     final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
     final size = MediaQuery.of(context).size;
@@ -18,21 +19,32 @@ class SizeUtils {
         crossAxisCount = isPortrait ? forPortrait ?? 2 : forLandscape ?? 3;
         break;
       case DeviceScreenType.tablet:
-        crossAxisCount = isPortrait ? forPortrait ?? 3 : forLandscape ?? 5;
+        switch (refinedSize) {
+          case RefinedSize.small:
+            crossAxisCount = isPortrait ? forPortrait ?? 3 : forLandscape ?? (isOnMainPage ? 4 : 5);
+            break;
+          case RefinedSize.normal:
+          case RefinedSize.large:
+            crossAxisCount = isPortrait ? forPortrait ?? 4 : forLandscape ?? (isOnMainPage ? 5 : 6);
+            break;
+          case RefinedSize.extraLarge:
+            crossAxisCount = isPortrait ? forPortrait ?? 5 : forLandscape ?? (isOnMainPage ? 6 : 7);
+            break;
+        }
         break;
       case DeviceScreenType.desktop:
         switch (refinedSize) {
           case RefinedSize.small:
-            crossAxisCount = 2;
+            crossAxisCount = isPortrait ? 2 : 3;
             break;
           case RefinedSize.normal:
-            crossAxisCount = 3;
+            crossAxisCount = isPortrait ? 3 : 5;
             break;
           case RefinedSize.large:
-            crossAxisCount = 5;
+            crossAxisCount = isPortrait ? 5 : 7;
             break;
           case RefinedSize.extraLarge:
-            crossAxisCount = 7;
+            crossAxisCount = isPortrait ? 7 : 9;
             break;
         }
         break;

diff --git a/lib/presentation/weapons/weapons_page.dart b/lib/presentation/weapons/weapons_page.dart
@@ -83,7 +83,7 @@ class _WeaponsPageState extends State<WeaponsPage> with AutomaticKeepAliveClient
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context),
+        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, isOnMainPage: !widget.isInSelectionMode),
         itemBuilder: (ctx, index) {
           final weapon = weapons[index];
           return WeaponCard(