[Presentation] Minor ui improvements

Wolfteam · Jul 23, 2021 · c8184ad · c8184ad
1 parent 14b6377
commit c8184ad
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 13 deletions.
diff --git a/lib/presentation/character/widgets/character_detail.dart b/lib/presentation/character/widgets/character_detail.dart
@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 export 'character_detail_ascension_materials_card.dart';
 export 'character_detail_bottom.dart';
 export 'character_detail_build_card.dart';
@@ -14,7 +12,3 @@ export 'character_detail_top.dart';
 const double imgSize = 28;
 const double imgHeight = 550;
 const double charDescriptionHeight = 240;
-
-double getTopHeightForPortrait(BuildContext context) {
-  return MediaQuery.of(context).size.height * 0.7;
-}
diff --git a/lib/presentation/character/widgets/character_detail_bottom.dart b/lib/presentation/character/widgets/character_detail_bottom.dart
@@ -43,6 +43,7 @@ class _PortraitLayout extends StatelessWidget {
       builder: (ctx, state) => state.map(
         loading: (_) => const Loading(useScaffold: false),
         loaded: (state) => DetailBottomPortraitLayout(
+          isAnSmallImage: false,
           children: [
             Container(
               margin: const EdgeInsets.only(bottom: 10),

diff --git a/lib/presentation/material/material_page.dart b/lib/presentation/material/material_page.dart
@@ -85,6 +85,7 @@ class _LandscapeLayout extends StatelessWidget {
                     obtainedFrom: state.obtainedFrom,
                     relatedTo: state.relatedMaterials,
                     droppedBy: state.droppedBy,
+                    description: state.description,
                   ),
                 ),
               ],

diff --git a/lib/presentation/material/widgets/material_detail_bottom.dart b/lib/presentation/material/widgets/material_detail_bottom.dart
@@ -40,6 +40,7 @@ class MaterialDetailBottom extends StatelessWidget {
     final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
     return isPortrait
         ? _PortraitLayout(
+            description: description,
             rarity: rarity,
             charImgs: charImgs,
             weaponImgs: weaponImgs,
@@ -48,6 +49,7 @@ class MaterialDetailBottom extends StatelessWidget {
             droppedBy: droppedBy,
           )
         : _LandscapeLayout(
+            description: description,
             rarity: rarity,
             charImgs: charImgs,
             weaponImgs: weaponImgs,

diff --git a/lib/presentation/shared/details/constants.dart b/lib/presentation/shared/details/constants.dart
@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+double getTopHeightForPortrait(BuildContext context, bool isAnSmallImage) {
+  final factor = isAnSmallImage ? 0.5 : 0.7;
+  final value = MediaQuery.of(context).size.height * factor;
+  //The max char height
+  if (value > 700) {
+    return 700;
+  }
+  return value;
+}
+
+double getTopMarginForPortrait(BuildContext context, double charDescriptionHeight, bool isAnSmallImage) {
+  final maxTopHeight = (getTopHeightForPortrait(context, isAnSmallImage) / 2) + (charDescriptionHeight / (isAnSmallImage ? 2 : 1.8));
+  return maxTopHeight;
+}
diff --git a/lib/presentation/shared/details/detail_bottom_portrait_layout.dart b/lib/presentation/shared/details/detail_bottom_portrait_layout.dart
@@ -3,18 +3,22 @@ import 'package:genshindb/presentation/character/widgets/character_detail.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
 import 'package:responsive_builder/responsive_builder.dart';
 
+import 'constants.dart';
+
 class DetailBottomPortraitLayout extends StatelessWidget {
   final List<Widget> children;
+  final bool isAnSmallImage;
 
   const DetailBottomPortraitLayout({
     Key? key,
     required this.children,
+    this.isAnSmallImage = true,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
-    final maxTopHeight = (getTopHeightForPortrait(context) / 2) + (charDescriptionHeight / 1.8);
+    final maxTopHeight = getTopMarginForPortrait(context, charDescriptionHeight, isAnSmallImage);
     final device = getDeviceType(size);
     final width = size.width * (device == DeviceScreenType.mobile ? 0.9 : 0.8);
     return SizedBox(

diff --git a/lib/presentation/shared/details/detail_top_layout.dart b/lib/presentation/shared/details/detail_top_layout.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:responsive_builder/responsive_builder.dart';
 
+import 'constants.dart';
+
 const double _imageWidthOnPortrait = 350;
 
 double? _getWidthToUse(
@@ -98,14 +100,14 @@ class DetailTopLayout extends StatelessWidget {
     final mediaQuery = MediaQuery.of(context);
     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 descriptionWidth = (mediaQuery.size.width / (isPortrait ? 1 : 2)) / (device == DeviceScreenType.mobile ? 1.2 : 1.5);
     final imgAlignment = showShadowImage
         ? isPortrait
             ? Alignment.centerLeft
             : Alignment.bottomLeft
         : Alignment.center;
     return Container(
-      height: isPortrait ? getTopHeightForPortrait(context) : null,
+      height: isPortrait ? getTopHeightForPortrait(context, isAnSmallImage) : null,
       color: color,
       decoration: decoration,
       child: Stack(
@@ -159,10 +161,6 @@ class DetailTopLayout extends StatelessWidget {
       ),
     );
   }
-
-  double getTopHeightForPortrait(BuildContext context) {
-    return MediaQuery.of(context).size.height * 0.7;
-  }
 }
 
 class ShadowImage extends StatelessWidget {