[Presentation] On mobile, show the settings title outside the card

Wolfteam · Jul 11, 2021 · 300f679 · 300f679
1 parent a175c65
commit 300f679
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 53 deletions.
diff --git a/lib/presentation/home/home_page.dart b/lib/presentation/home/home_page.dart
@@ -37,58 +37,55 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin<
     super.build(context);
 
     final s = S.of(context);
-    return CustomScrollView(
-      slivers: [
-        SliverCharactersBirthdayCard(),
-        const SliverTodayMainTitle(),
-        _buildClickableTitle(s.forCharacters, s.seeAll, context, onClick: () => _gotoMaterialsPage(context)),
-        SliverTodayCharAscensionMaterials(),
-        _buildClickableTitle(s.forWeapons, s.seeAll, context, onClick: () => _gotoMaterialsPage(context)),
-        SliverTodayWeaponMaterials(),
-        SliverMainTitle(title: s.gameSpecific),
-        SliverToBoxAdapter(
-          child: SizedBox(
-            height: 160,
-            child: ListView.builder(
-              physics: const BouncingScrollPhysics(),
-              scrollDirection: Axis.horizontal,
-              itemCount: 3,
-              itemBuilder: (context, index) => _buildGameSectionMenus(index),
+    return ResponsiveBuilder(
+      builder: (ctx, size) => CustomScrollView(
+        slivers: [
+          SliverCharactersBirthdayCard(),
+          const SliverTodayMainTitle(),
+          _buildClickableTitle(s.forCharacters, s.seeAll, context, onClick: () => _gotoMaterialsPage(context)),
+          SliverTodayCharAscensionMaterials(),
+          _buildClickableTitle(s.forWeapons, s.seeAll, context, onClick: () => _gotoMaterialsPage(context)),
+          SliverTodayWeaponMaterials(),
+          SliverMainTitle(title: s.gameSpecific),
+          SliverToBoxAdapter(
+            child: SizedBox(
+              height: 160,
+              child: ListView.builder(
+                physics: const BouncingScrollPhysics(),
+                scrollDirection: Axis.horizontal,
+                itemCount: 3,
+                itemBuilder: (context, index) => _buildGameSectionMenus(index),
+              ),
             ),
           ),
-        ),
-        SliverMainTitle(title: s.tools),
-        SliverToBoxAdapter(
-          child: SizedBox(
-            height: 160,
-            child: ListView.builder(
-              physics: const BouncingScrollPhysics(),
-              scrollDirection: Axis.horizontal,
-              itemCount: 4,
-              itemBuilder: (context, index) => _buildToolsSectionMenu(index),
+          SliverMainTitle(title: s.tools),
+          SliverToBoxAdapter(
+            child: SizedBox(
+              height: 160,
+              child: ListView.builder(
+                physics: const BouncingScrollPhysics(),
+                scrollDirection: Axis.horizontal,
+                itemCount: 4,
+                itemBuilder: (context, index) => _buildToolsSectionMenu(index),
+              ),
             ),
           ),
-        ),
-        SliverMainTitle(title: s.others),
-        SliverToBoxAdapter(
-          child: SizedBox(
-            height: 160,
-            child: ListView.builder(
-              physics: const BouncingScrollPhysics(),
-              scrollDirection: Axis.horizontal,
-              itemCount: 3,
-              itemBuilder: (context, index) => _buildOthersSectionMenu(index),
+          SliverMainTitle(title: s.others),
+          SliverToBoxAdapter(
+            child: SizedBox(
+              height: 160,
+              child: ListView.builder(
+                physics: const BouncingScrollPhysics(),
+                scrollDirection: Axis.horizontal,
+                itemCount: 3,
+                itemBuilder: (context, index) => _buildOthersSectionMenu(index),
+              ),
             ),
           ),
-        ),
-        SliverToBoxAdapter(
-          child: ResponsiveBuilder(
-            builder: (ctx, size) => size.deviceScreenType == DeviceScreenType.desktop || size.deviceScreenType == DeviceScreenType.tablet
-                ? const SizedBox(height: 1)
-                : const SettingsCard(iconToTheLeft: true),
-          ),
-        ),
-      ],
+          if (size.deviceScreenType == DeviceScreenType.mobile) SliverMainTitle(title: s.settings),
+          if (size.deviceScreenType == DeviceScreenType.mobile) const SliverToBoxAdapter(child: SettingsCard(iconToTheLeft: true)),
+        ],
+      ),
     );
   }
 

diff --git a/lib/presentation/home/widgets/card_item.dart b/lib/presentation/home/widgets/card_item.dart
@@ -28,16 +28,19 @@ class CardItem extends StatelessWidget {
         shape: RoundedRectangleBorder(borderRadius: Styles.homeCardItemBorderRadius),
         child: Container(
           width: 300,
+          height: 100,
           padding: Styles.edgeInsetAll15,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: [
-              Text(
-                title,
-                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
-                overflow: TextOverflow.ellipsis,
-                textAlign: TextAlign.center,
-              ),
+              if (title.isNotEmpty)
+                Text(
+                  title,
+                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: TextAlign.center,
+                ),
               if (iconToTheLeft) _LeftLayout(icon: icon, children: children) else _RightLayout(icon: icon, children: children),
             ],
           ),

diff --git a/lib/presentation/home/widgets/settings_card.dart b/lib/presentation/home/widgets/settings_card.dart
@@ -17,7 +17,7 @@ class SettingsCard extends StatelessWidget {
     final theme = Theme.of(context);
     final s = S.of(context);
     return CardItem(
-      title: s.settings,
+      title: '',
       onClick: _gotoSettingsPage,
       iconToTheLeft: iconToTheLeft,
       icon: Icon(Icons.settings, size: 60, color: theme.accentColor),