[Presentation] Improvements to the material_page.dart

lib/presentation/characters/characters_page.dart

@@ -9,7 +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 'package:genshindb/presentation/shared/utils/size_utils.dart';
 
 import 'widgets/character_bottom_sheet.dart';
 import 'widgets/character_card.dart';
@@ -83,7 +83,7 @@ class _CharactersPageState extends State<CharactersPage> with AutomaticKeepAlive
     return SliverPadding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       sliver: SliverStaggeredGrid.countBuilder(
-        crossAxisCount: GridUtils.getCrossAxisCountForGrids(context),
+        crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context),
         itemBuilder: (ctx, index) => CharacterCard.item(char: characters[index], isInSelectionMode: widget.isInSelectionMode),
         itemCount: characters.length,
         crossAxisSpacing: isPortrait ? 10 : 5,

lib/presentation/game_codes/widgets/game_code_list_item.dart

@@ -10,6 +10,7 @@ import 'package:genshindb/domain/utils/date_utils.dart' as utils;
 import 'package:genshindb/generated/l10n.dart';
 import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
+import 'package:genshindb/presentation/shared/utils/size_utils.dart';
 import 'package:genshindb/presentation/shared/utils/toast_utils.dart';
 import 'package:genshindb/presentation/shared/wrapped_ascension_material.dart';
 
@@ -26,7 +27,7 @@ class GameCodeListItem extends StatelessWidget {
   GameCodeListItem({
     Key? key,
     required GameCodeModel item,
-  })   : code = item.code,
+  })  : code = item.code,
         discoveredOn = item.discoveredOn,
         expiredOn = item.expiredOn,
         isUsed = item.isUsed,
@@ -82,7 +83,13 @@ class GameCodeListItem extends StatelessWidget {
                     Wrap(
                       alignment: WrapAlignment.center,
                       crossAxisAlignment: WrapCrossAlignment.center,
-                      children: rewards.map((m) => WrappedAscensionMaterial(image: m.fullImagePath, quantity: m.quantity, size: 25)).toList(),
+                      children: rewards
+                          .map((m) => WrappedAscensionMaterial(
+                                image: m.fullImagePath,
+                                quantity: m.quantity,
+                                size: SizeUtils.getSizeForCircleImages(context) * 0.6,
+                              ))
+                          .toList(),
                     ),
                     if (region != null)
                       Wrap(
@@ -92,7 +99,7 @@ class GameCodeListItem extends StatelessWidget {
                           Icon(
                             Icons.lock_outlined,
                             color: theme.accentColor,
-                            size: 15,
+                            size: SizeUtils.getSizeForCircleImages(context) * 0.45,
                           ),
                           Text(
                             s.onlyX(s.translateServerResetTimeType(region!)),
@@ -106,7 +113,7 @@ class GameCodeListItem extends StatelessWidget {
               ),
               Expanded(
                 child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.end,
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     _buildDateInfoRow(

lib/presentation/inventory/widgets/characters_inventory_tab_page.dart

@@ -8,7 +8,7 @@ import 'package:genshindb/presentation/characters/widgets/character_card.dart';
 import 'package:genshindb/presentation/shared/app_fab.dart';
 import 'package:genshindb/presentation/shared/loading.dart';
 import 'package:genshindb/presentation/shared/mixins/app_fab_mixin.dart';
-import 'package:genshindb/presentation/shared/utils/grid_utils.dart';
+import 'package:genshindb/presentation/shared/utils/size_utils.dart';
 
 class CharactersInventoryTabPage extends StatefulWidget {
   @override
@@ -40,7 +40,7 @@ class _CharactersInventoryTabPageState extends State<CharactersInventoryTabPage>
             loading: (_) => const Loading(useScaffold: false),
             loaded: (state) => StaggeredGridView.countBuilder(
               controller: scrollController,
-              crossAxisCount: GridUtils.getCrossAxisCountForGrids(context),
+              crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context),
               itemBuilder: (ctx, index) => CharacterCard.item(char: state.characters[index]),
               itemCount: state.characters.length,
               crossAxisSpacing: isPortrait ? 10 : 5,

lib/presentation/inventory/widgets/materials_inventory_tab_page.dart

@@ -5,7 +5,7 @@ import 'package:genshindb/application/bloc.dart';
 import 'package:genshindb/presentation/materials/widgets/material_card.dart';
 import 'package:genshindb/presentation/shared/loading.dart';
 import 'package:genshindb/presentation/shared/mixins/app_fab_mixin.dart';
-import 'package:genshindb/presentation/shared/utils/grid_utils.dart';
+import 'package:genshindb/presentation/shared/utils/size_utils.dart';
 
 class MaterialsInventoryTabPage extends StatefulWidget {
   @override
@@ -25,7 +25,7 @@ class _MaterialsInventoryTabPageState extends State<MaterialsInventoryTabPage> w
             loading: (_) => const Loading(useScaffold: false),
             loaded: (state) => StaggeredGridView.countBuilder(
               controller: scrollController,
-              crossAxisCount: GridUtils.getCrossAxisCountForGrids(context, forPortrait: 3),
+              crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, itemIsSmall: true),
               itemBuilder: (ctx, index) => MaterialCard.quantity(item: state.materials[index]),
               itemCount: state.materials.length,
               crossAxisSpacing: isPortrait ? 10 : 5,

lib/presentation/inventory/widgets/weapons_inventory_tab_page.dart

@@ -6,7 +6,7 @@ import 'package:genshindb/domain/extensions/string_extensions.dart';
 import 'package:genshindb/presentation/shared/app_fab.dart';
 import 'package:genshindb/presentation/shared/loading.dart';
 import 'package:genshindb/presentation/shared/mixins/app_fab_mixin.dart';
-import 'package:genshindb/presentation/shared/utils/grid_utils.dart';
+import 'package:genshindb/presentation/shared/utils/size_utils.dart';
 import 'package:genshindb/presentation/weapons/weapons_page.dart';
 import 'package:genshindb/presentation/weapons/widgets/weapon_card.dart';
 
@@ -40,7 +40,7 @@ class _WeaponsInventoryTabPageState extends State<WeaponsInventoryTabPage> with
             loading: (_) => const Loading(useScaffold: false),
             loaded: (state) => StaggeredGridView.countBuilder(
               controller: scrollController,
-              crossAxisCount: GridUtils.getCrossAxisCountForGrids(context),
+              crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context),
               itemBuilder: (ctx, index) => WeaponCard.item(weapon: state.weapons[index]),
               itemCount: state.weapons.length,
               crossAxisSpacing: isPortrait ? 10 : 5,

lib/presentation/material/material_page.dart

@@ -8,6 +8,16 @@ import 'widgets/material_detail_bottom.dart';
 import 'widgets/material_detail_top.dart';
 
 class MaterialPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
+    return isPortrait ? const _PortraitLayout() : const _LandscapeLayout();
+  }
+}
+
+class _PortraitLayout extends StatelessWidget {
+  const _PortraitLayout({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
     return ScaffoldWithFab(
@@ -16,6 +26,9 @@ class MaterialPage extends StatelessWidget {
           return state.map(
             loading: (_) => const Loading(useScaffold: false),
             loaded: (s) => Stack(
+              fit: StackFit.passthrough,
+              clipBehavior: Clip.none,
+              alignment: Alignment.topCenter,
               children: [
                 MaterialDetailTop(
                   name: s.name,
@@ -41,3 +54,44 @@ class MaterialPage extends StatelessWidget {
     );
   }
 }
+
+class _LandscapeLayout extends StatelessWidget {
+  const _LandscapeLayout({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: BlocBuilder<bloc.MaterialBloc, bloc.MaterialState>(
+          builder: (ctx, state) => state.map(
+            loading: (_) => const Loading(useScaffold: false),
+            loaded: (state) => Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Expanded(
+                  child: MaterialDetailTop(
+                    name: state.name,
+                    image: state.fullImage,
+                    type: state.type,
+                    rarity: state.rarity,
+                    days: state.days,
+                  ),
+                ),
+                Expanded(
+                  child: MaterialDetailBottom(
+                    rarity: state.rarity,
+                    charImgs: state.charImages,
+                    weaponImgs: state.weaponImages,
+                    obtainedFrom: state.obtainedFrom,
+                    relatedTo: state.relatedMaterials,
+                    droppedBy: state.droppedBy,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}