[Presentation] Improvements to the weapon_page.dart

lib/presentation/materials/materials_page.dart

@@ -8,6 +8,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/size_utils.dart';
 
 import 'widgets/material_bottom_sheet.dart';
 import 'widgets/material_card.dart';
@@ -54,7 +55,7 @@ class MaterialsPage extends StatelessWidget {
                 SliverPadding(
                   padding: Styles.edgeInsetHorizontal5,
                   sliver: SliverStaggeredGrid.countBuilder(
-                    crossAxisCount: isPortrait ? 3 : 5,
+                    crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, itemIsSmall: true),
                     itemBuilder: (ctx, index) => MaterialCard.item(item: state.materials[index], isInSelectionMode: isInSelectionMode),
                     itemCount: state.materials.length,
                     crossAxisSpacing: isPortrait ? 10 : 5,

lib/presentation/shared/details/detail_top_layout.dart

@@ -90,6 +90,11 @@ class CommonDetailTopLayout extends StatelessWidget {
     final isPortrait = mediaQuery.orientation == Orientation.portrait;
     final device = getDeviceType(mediaQuery.size);
     final descriptionWidth = (mediaQuery.size.width / (isPortrait ? 1 : 2)) / (device == DeviceScreenType.mobile ? 1.2 : 2);
+    final imgAlignment = showShadowImage
+        ? isPortrait
+            ? Alignment.centerLeft
+            : Alignment.bottomLeft
+        : Alignment.center;
     return Container(
       height: isPortrait ? getTopHeightForPortrait(context) : null,
       color: color,

lib/presentation/weapon/weapon_page.dart

@@ -4,37 +4,50 @@ import 'package:genshindb/application/bloc.dart';
 import 'package:genshindb/presentation/shared/loading.dart';
 import 'package:genshindb/presentation/shared/scaffold_with_fab.dart';
 import 'package:genshindb/presentation/weapon/widgets/weapon_detail_bottom.dart';
-import 'package:genshindb/presentation/weapon/widgets/weapon_detaill_top.dart';
+import 'package:genshindb/presentation/weapon/widgets/weapon_detail_top.dart';
 
 class WeaponPage 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(
       child: BlocBuilder<WeaponBloc, WeaponState>(
         builder: (context, state) {
           return state.map(
             loading: (_) => const Loading(useScaffold: false),
-            loaded: (s) => Stack(
+            loaded: (state) => Stack(
+              fit: StackFit.passthrough,
+              clipBehavior: Clip.none,
+              alignment: Alignment.topCenter,
               children: [
                 WeaponDetailTop(
-                  name: s.name,
-                  atk: s.atk,
-                  rarity: s.rarity,
-                  secondaryStatType: s.secondaryStat,
-                  secondaryStatValue: s.secondaryStatValue,
-                  type: s.weaponType,
-                  locationType: s.locationType,
-                  image: s.fullImage,
+                  name: state.name,
+                  atk: state.atk,
+                  rarity: state.rarity,
+                  secondaryStatType: state.secondaryStat,
+                  secondaryStatValue: state.secondaryStatValue,
+                  type: state.weaponType,
+                  locationType: state.locationType,
+                  image: state.fullImage,
                 ),
                 WeaponDetailBottom(
-                  description: s.description,
-                  rarity: s.rarity,
-                  secondaryStatType: s.secondaryStat,
-                  stats: s.stats,
-                  ascensionMaterials: s.ascensionMaterials,
-                  refinements: s.refinements,
-                  charImgs: s.charImages,
-                  craftingMaterials: s.craftingMaterials,
+                  rarity: state.rarity,
+                  description: state.description,
+                  ascensionMaterials: state.ascensionMaterials,
+                  charImgs: state.charImages,
+                  craftingMaterials: state.craftingMaterials,
+                  refinements: state.refinements,
+                  secondaryStatType: state.secondaryStat,
+                  stats: state.stats,
                 ),
               ],
             ),
@@ -44,3 +57,49 @@ class WeaponPage extends StatelessWidget {
     );
   }
 }
+
+class _LandscapeLayout extends StatelessWidget {
+  const _LandscapeLayout({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: BlocBuilder<WeaponBloc, WeaponState>(
+          builder: (ctx, state) => state.map(
+            loading: (_) => const Loading(useScaffold: false),
+            loaded: (state) => Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Expanded(
+                  child: WeaponDetailTop(
+                    name: state.name,
+                    atk: state.atk,
+                    rarity: state.rarity,
+                    secondaryStatType: state.secondaryStat,
+                    secondaryStatValue: state.secondaryStatValue,
+                    type: state.weaponType,
+                    locationType: state.locationType,
+                    image: state.fullImage,
+                  ),
+                ),
+                Expanded(
+                  child: WeaponDetailBottom(
+                    rarity: state.rarity,
+                    description: state.description,
+                    ascensionMaterials: state.ascensionMaterials,
+                    charImgs: state.charImages,
+                    craftingMaterials: state.craftingMaterials,
+                    refinements: state.refinements,
+                    secondaryStatType: state.secondaryStat,
+                    stats: state.stats,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/weapon/widgets/weapon_detail_ascension_materials_card.dart

@@ -3,6 +3,7 @@ import 'package:genshindb/domain/models/models.dart';
 import 'package:genshindb/generated/l10n.dart';
 import 'package:genshindb/presentation/shared/item_description_detail.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
+import 'package:genshindb/presentation/shared/utils/size_utils.dart';
 import 'package:genshindb/presentation/shared/wrapped_ascension_material.dart';
 
 class WeaponDetailAscensionMaterialsCard extends StatelessWidget {
@@ -18,6 +19,7 @@ class WeaponDetailAscensionMaterialsCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final s = S.of(context);
+    final size = SizeUtils.getSizeForCircleImages(context, smallImage: true);
     final body = Card(
       elevation: Styles.cardTenElevation,
       shape: Styles.cardShape,
@@ -46,15 +48,21 @@ class WeaponDetailAscensionMaterialsCard extends StatelessWidget {
               ),
             ],
           ),
-          ...ascensionMaterials.map((e) => _buildStatProgressionRow(e)).toList(),
+          ...ascensionMaterials.map((e) => _buildStatProgressionRow(e, size)).toList(),
         ],
       ),
     );
     return ItemDescriptionDetail(title: s.ascensionMaterials, body: body, textColor: rarityColor);
   }
 
-  TableRow _buildStatProgressionRow(WeaponFileAscensionMaterial model) {
-    final materials = model.materials.map((m) => WrappedAscensionMaterial(image: m.fullImagePath, quantity: m.quantity)).toList();
+  TableRow _buildStatProgressionRow(WeaponFileAscensionMaterial model, double size) {
+    final materials = model.materials
+        .map((m) => WrappedAscensionMaterial(
+              image: m.fullImagePath,
+              quantity: m.quantity,
+              size: size,
+            ))
+        .toList();
     return TableRow(children: [
       TableCell(
         verticalAlignment: TableCellVerticalAlignment.middle,