Merge pull request #117 from krolmic/feat/optimize-for-tablet

Feat/optimize for tablet

tracking_flutter/ios/Runner.xcodeproj/project.pbxproj

@@ -505,8 +505,13 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = app.healthyhustle;
 				PRODUCT_NAME = "$(TARGET_NAME)";
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Profile;
@@ -685,9 +690,14 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = app.healthyhustle;
 				PRODUCT_NAME = "$(TARGET_NAME)";
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -709,8 +719,13 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = app.healthyhustle;
 				PRODUCT_NAME = "$(TARGET_NAME)";
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

tracking_flutter/lib/calendar/view/calendar_screen.dart

@@ -21,6 +21,7 @@ import 'package:tracking_app/shared/theme/layout.dart';
 import 'package:tracking_app/shared/toast.dart';
 import 'package:tracking_app/shared/widgets/loading_indicator.dart';
 import 'package:tracking_app/shared/widgets/mood_emoji.dart';
+import 'package:tracking_app/shared/widgets/moods_shader_mask.dart';
 import 'package:tracking_app/shared/widgets/spacing.dart';
 import 'package:tracking_app/update_mood/bloc/update_mood_bloc.dart';
 import 'package:user_profile_repository/user_profile_repository.dart';
@@ -113,54 +114,60 @@ class _CalendarView extends StatelessWidget {
           buildWhen: (previous, current) =>
               previous.moodsState != current.moodsState,
           builder: (context, state) {
-            return Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                const VerticalSpacing.large(),
-                Center(
-                  child: Container(
-                    constraints: const BoxConstraints(maxWidth: 430),
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: viewPaddingHorizontal,
+            return Center(
+              child: Container(
+                constraints: const BoxConstraints(maxWidth: maxViewWidth),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const VerticalSpacing.large(),
+                    Center(
+                      child: Container(
+                        constraints: const BoxConstraints(maxWidth: 430),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: viewPaddingHorizontal,
+                        ),
+                        child: _Calendar(
+                          targetMonthDate: state.targetDate.date,
+                          moods: state.moodsState.moods,
+                        ),
+                      ),
                     ),
-                    child: _Calendar(
-                      targetMonthDate: state.targetDate.date,
-                      moods: state.moodsState.moods,
+                    const VerticalSpacing.medium(),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: viewPaddingHorizontal,
+                      ),
+                      child: Text(
+                        translations.trackedMood,
+                        style: Theme.of(context).textTheme.headlineSmall,
+                      ),
                     ),
-                  ),
+                    const VerticalSpacing.medium(),
+                    if (state.moodsState.isLoading ||
+                        state.moodsState.isInitial)
+                      const SizedBox(
+                        height: 125,
+                        child: Center(child: LoadingIndicator()),
+                      )
+                    else if (state.moodsState.isSuccess &&
+                        state.moodsState.moods.isEmpty)
+                      Padding(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: viewPaddingHorizontal,
+                        ),
+                        child: Text(
+                          translations.noTrackedMood,
+                          style: Theme.of(context).textTheme.bodyMedium,
+                        ),
+                      )
+                    else if (state.moodsState.isSuccess)
+                      _MoodsInMonth(moods: state.moodsState.moods)
+                          .animate()
+                          .fadeIn(duration: animationDuration),
+                  ],
                 ),
-                const VerticalSpacing.large(),
-                Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: viewPaddingHorizontal,
-                  ),
-                  child: Text(
-                    translations.trackedMood,
-                    style: Theme.of(context).textTheme.headlineSmall,
-                  ),
-                ),
-                const VerticalSpacing.medium(),
-                if (state.moodsState.isLoading || state.moodsState.isInitial)
-                  const SizedBox(
-                    height: 125,
-                    child: Center(child: LoadingIndicator()),
-                  )
-                else if (state.moodsState.isSuccess &&
-                    state.moodsState.moods.isEmpty)
-                  Padding(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: viewPaddingHorizontal,
-                    ),
-                    child: Text(
-                      translations.noTrackedMood,
-                      style: Theme.of(context).textTheme.bodyMedium,
-                    ),
-                  )
-                else if (state.moodsState.isSuccess)
-                  _MoodsInMonth(moods: state.moodsState.moods)
-                      .animate()
-                      .fadeIn(duration: animationDuration),
-              ],
+              ),
             );
           },
         ),

tracking_flutter/lib/calendar/view/widgets/calendar.dart

@@ -52,13 +52,14 @@ class _Calendar extends StatelessWidget {
     return Column(
       children: [
         Padding(
-          padding: const EdgeInsets.only(left: 12, right: 2),
+          padding:
+              const EdgeInsets.symmetric(horizontal: horizontalPaddingLarge),
           child: _CalendarHeader(targetMonthDate: targetMonthDate),
         ),
         const VerticalSpacing.extraLarge(),
         CalendarCarousel<Event>(
           firstDayOfWeek: (0 + 1) % 7,
-          height: 350,
+          height: 335,
           todayButtonColor: _CalendarTheme.todayButtonColor,
           todayTextStyle: _CalendarTheme.todayTextStyle,
           daysTextStyle: _CalendarTheme.calendarDaysTextStyle,
@@ -128,7 +129,6 @@ class _Calendar extends StatelessWidget {
               date: mood.createdOn.dateOnly,
               dot: Container(
                 decoration: _CalendarTheme.eventDotDecoration,
-                margin: const EdgeInsets.symmetric(horizontal: 1),
                 height: 6,
                 width: 6,
               ).animate().fadeIn(
@@ -190,7 +190,7 @@ class _CalendarHeader extends StatelessWidget {
             ),
           ),
         ),
-        const HorizontalSpacing.large(),
+        const HorizontalSpacing.extraLarge(),
         Material(
           color: Colors.transparent,
           child: InkWell(

tracking_flutter/lib/calendar/view/widgets/moods_in_month.dart

@@ -9,21 +9,26 @@ class _MoodsInMonth extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      scrollDirection: Axis.horizontal,
-      child: Row(
-        children: [
-          const SizedBox(width: viewPaddingHorizontal),
-          for (final mood in moods)
-            Padding(
-              key: ValueKey(mood),
-              padding: const EdgeInsets.only(
-                right: verticalPaddingSmall,
+    return MoodsShaderMask(
+      begin: Alignment.centerLeft,
+      end: Alignment.centerRight,
+      stops: const [0.0, 0.9, 1.0],
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Row(
+          children: [
+            const SizedBox(width: viewPaddingHorizontal),
+            for (final mood in moods)
+              Padding(
+                key: ValueKey(mood),
+                padding: const EdgeInsets.only(
+                  right: verticalPaddingSmall,
+                ),
+                child: _TrackedMood(mood: mood),
               ),
-              child: _TrackedMood(mood: mood),
-            ),
-          const SizedBox(width: viewPaddingHorizontal),
-        ],
+            const SizedBox(width: viewPaddingHorizontal),
+          ],
+        ),
       ),
     );
   }

tracking_flutter/lib/home/view/home_screen.dart

@@ -31,7 +31,9 @@ import 'package:tracking_app/update_mood/bloc/update_mood_bloc.dart';
 import 'package:tracking_app/user_profile/cubit/user_profile_cubit.dart';
 import 'package:user_profile_repository/user_profile_repository.dart';
 
-part 'widgets/progress.dart';
+part 'widgets/home_moods.dart';
+part 'widgets/home_moods_header.dart';
+part 'widgets/home_progress.dart';
 
 class HomeScreen extends StatelessWidget {
   const HomeScreen({super.key});
@@ -286,37 +288,8 @@ class _HomeContentView extends StatelessWidget {
             ),
           ),
           const VerticalSpacing.large(),
-          if (moods.isNotEmpty)
-            Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Text(
-                  translations.recentlyTracked,
-                  style: Theme.of(context).textTheme.headlineSmall,
-                ),
-                TextButton(
-                  onPressed: () {
-                    context.goNamed(RoutesNames.moods);
-                  },
-                  child: Text(
-                    translations.seeAll,
-                    style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                          color: AppColors.blue,
-                        ),
-                  ),
-                ),
-              ],
-            ),
-          for (final mood in moods)
-            TrackedMood(
-              mood: mood,
-              onTap: () => context.pushNamed(
-                RoutesNames.updateMoodFromHome,
-                extra: UpdateMoodRouteParameters(mood: mood),
-              ),
-            ).animate().fadeIn(
-                  duration: animationDuration,
-                ),
+          if (moods.isNotEmpty) const _HomeMoodsHeader(),
+          _HomeMoods(moods: moods),
           if (addExtraBottomSpace) const VerticalSpacing.extraLarge(),
         ],
       ),

tracking_flutter/lib/home/view/widgets/home_moods.dart

@@ -0,0 +1,26 @@
+part of '../home_screen.dart';
+
+class _HomeMoods extends StatelessWidget {
+  const _HomeMoods({required this.moods});
+
+  final List<Mood> moods;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        for (final mood in moods)
+          TrackedMood(
+            mood: mood,
+            onTap: () => context.pushNamed(
+              RoutesNames.updateMoodFromHome,
+              extra: UpdateMoodRouteParameters(mood: mood),
+            ),
+          ).animate().fadeIn(
+                duration: animationDuration,
+              ),
+        const VerticalSpacing.medium(),
+      ],
+    );
+  }
+}

tracking_flutter/lib/home/view/widgets/home_moods_header.dart

@@ -0,0 +1,31 @@
+part of '../home_screen.dart';
+
+class _HomeMoodsHeader extends StatelessWidget {
+  const _HomeMoodsHeader();
+
+  @override
+  Widget build(BuildContext context) {
+    final translations = AppLocalizations.of(context)!;
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(
+          translations.recentlyTracked,
+          style: Theme.of(context).textTheme.headlineSmall,
+        ),
+        TextButton(
+          onPressed: () {
+            context.goNamed(RoutesNames.moods);
+          },
+          child: Text(
+            translations.seeAll,
+            style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                  color: AppColors.blue,
+                ),
+          ),
+        ),
+      ],
+    );
+  }
+}

tracking_flutter/lib/moods/view/moods_screen.dart

@@ -13,19 +13,17 @@ import 'package:tracking_app/moods/cubit/moods_cubit.dart';
 import 'package:tracking_app/shared/router/routes_names.dart';
 import 'package:tracking_app/shared/router/routes_parameters.dart';
 import 'package:tracking_app/shared/theme/animation.dart';
-import 'package:tracking_app/shared/theme/colors.dart';
 import 'package:tracking_app/shared/theme/layout.dart';
 import 'package:tracking_app/shared/view/base_view.dart';
 import 'package:tracking_app/shared/widgets/app_elevated_button.dart';
 import 'package:tracking_app/shared/widgets/error_message.dart';
 import 'package:tracking_app/shared/widgets/loading_indicator.dart';
+import 'package:tracking_app/shared/widgets/moods_shader_mask.dart';
 import 'package:tracking_app/shared/widgets/tracked_mood.dart';
 import 'package:tracking_app/update_mood/bloc/update_mood_bloc.dart';
 import 'package:tracking_app/user_profile/cubit/user_profile_cubit.dart';
 import 'package:user_profile_repository/user_profile_repository.dart';
 
-part 'widgets/moods_shader_mask.dart';
-
 class MoodsScreen extends StatelessWidget {
   const MoodsScreen({super.key});
 
@@ -211,6 +209,9 @@ class _MoodsContentViewState extends State<_MoodsContentView> {
       children: [
         Expanded(
           child: MoodsShaderMask(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            stops: const [0.0, 0.95, 1.0],
             child: _buildMoods(),
           ),
         ),

tracking_flutter/lib/settings/view/widgets/user_profile_avatar.dart

@@ -64,8 +64,10 @@ class _UserProfileAvatar extends StatelessWidget {
           title: AppLocalizations.of(context)!.selectEmoji,
           body: Padding(
             padding: const EdgeInsets.only(top: verticalPaddingLarge),
-            child: SizedBox(
+            child: Container(
+              constraints: const BoxConstraints(maxWidth: 500),
               width: double.maxFinite,
+              height: MediaQuery.of(context).size.height * 0.4,
               child: GridView.count(
                 crossAxisCount: 4,
                 crossAxisSpacing: 15,

tracking_flutter/lib/shared/theme/layout.dart

@@ -7,5 +7,9 @@ const double verticalPaddingExtraExtraLarge = 60;
 const double horizontalPaddingSmall = 5;
 const double horizontalPaddingMedium = 10;
 const double horizontalPaddingLarge = 15;
+const double horizontalPaddingExtraLarge = 30;
 const double viewPaddingVertical = 15;
 const double viewPaddingHorizontal = 25;
+
+// View size constants
+const double maxViewWidth = 700;