Beautiful activity cards (#48)

* change visual of activity cards

* fix import and dart fix

* edit screenshots

Author: BenjaminCanape

lib/data/api/activity_api.dart

@@ -17,7 +17,7 @@ class ActivityApi {
       int pageNumber) async {
     Response? response = await ApiHelper.makeRequest(
         '${ActivityApi.url}all', 'GET',
-        queryParams: {'page': pageNumber, 'size': 5});
+        queryParams: {'page': pageNumber, 'size': 20});
 
     PageResponse pageResponse = PageResponse.fromMap(response?.data);
     final data = List<Map<String, dynamic>>.from(pageResponse.list);
@@ -33,7 +33,7 @@ class ActivityApi {
       int pageNumber) async {
     Response? response = await ApiHelper.makeRequest(
         '${ActivityApi.url}friends', 'GET',
-        queryParams: {'page': pageNumber, 'size': 3}, noCache: true);
+        queryParams: {'page': pageNumber, 'size': 10}, noCache: true);
     PageResponse pageResponse = PageResponse.fromMap(response?.data);
     final data = List<Map<String, dynamic>>.from(pageResponse.list);
     List<ActivityResponse> activities =
@@ -48,7 +48,7 @@ class ActivityApi {
       String userId, int pageNumber) async {
     Response? response = await ApiHelper.makeRequest(
         '${ActivityApi.url}user/$userId', 'GET',
-        queryParams: {'page': pageNumber, 'size': 5}, noCache: true);
+        queryParams: {'page': pageNumber, 'size': 20}, noCache: true);
     PageResponse pageResponse = PageResponse.fromMap(response?.data);
     final data = List<Map<String, dynamic>>.from(pageResponse.list);
     List<ActivityResponse> activities =

lib/presentation/common/activity/widgets/activity_comments.dart

@@ -5,13 +5,13 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:quickalert/quickalert.dart';
-import '../../core/utils/ui_utils.dart';
 
 import '../../../../core/utils/storage_utils.dart';
 import '../../../../domain/entities/activity.dart';
 import '../../../../domain/entities/activity_comment.dart';
 import '../../../../domain/entities/user.dart';
 import '../../core/utils/color_utils.dart';
+import '../../core/utils/ui_utils.dart';
 import '../../core/utils/user_utils.dart';
 import '../../user/view_model/profile_picture_view_model.dart';
 import '../view_model/activity_item_comments_view_model.dart';

lib/presentation/common/activity/widgets/activity_item.dart

@@ -35,8 +35,6 @@ class ActivityItem extends HookConsumerWidget {
     final List<Color> colors = ColorUtils.generateColorTupleFromIndex(index);
     final titleColor = colors.first;
 
-    final startColor = colors.first;
-    final endColor = colors.last;
     const double borderRadius = 24;
 
     Activity currentActivity = state.activity ?? activity;
@@ -74,35 +72,27 @@ class ActivityItem extends HookConsumerWidget {
                 Row(
                   children: [
                     if (!displayUserName)
-                      Container(
+                      SizedBox(
                         width: 120,
                         height: 150,
-                        decoration: BoxDecoration(
-                          borderRadius: const BorderRadius.only(
-                            topLeft: Radius.circular(borderRadius),
-                            bottomLeft: Radius.circular(borderRadius),
-                          ),
-                          gradient: LinearGradient(
-                            colors: [startColor, endColor],
-                            begin: Alignment.topLeft,
-                            end: Alignment.bottomRight,
-                          ),
-                          boxShadow: [
-                            BoxShadow(
-                              color: endColor,
-                              blurRadius: 12,
-                              offset: const Offset(0, 6),
-                            ),
-                          ],
-                        ),
                         child: Center(
                           child: Icon(
                             ActivityUtils.getActivityTypeIcon(activity.type),
-                            color: ColorUtils.white,
-                            size: 40,
+                            color: Colors.blueGrey.shade700,
+                            size: 60,
                           ),
                         ),
                       ),
+                    if (!displayUserName)
+                      SizedBox(
+                        height: 84,
+                        child: VerticalDivider(
+                          key: Key(activity.id.toString()),
+                          color: Colors.blueGrey.shade400,
+                          thickness: 4,
+                          width: 4,
+                        ),
+                      ),
                     if (!displayUserName) const SizedBox(width: 16),
                     Expanded(
                       child: Column(

lib/presentation/common/core/utils/activity_utils.dart

@@ -24,13 +24,13 @@ class ActivityUtils {
   static IconData getActivityTypeIcon(ActivityType type) {
     switch (type) {
       case ActivityType.running:
-        return Icons.run_circle_outlined;
+        return Icons.directions_run;
       case ActivityType.walking:
-        return Icons.nordic_walking;
+        return Icons.directions_walk;
       case ActivityType.cycling:
-        return Icons.pedal_bike;
+        return Icons.directions_bike;
       default:
-        return Icons.run_circle_rounded;
+        return Icons.directions_run;
     }
   }
 

screenshots/activity_list/activity_list.png

@@ -8,11 +8,11 @@ void main() {
   group('ActivityUtils', () {
     test('getActivityTypeIcon should return correct icons', () {
       expect(ActivityUtils.getActivityTypeIcon(ActivityType.running),
-          Icons.run_circle_outlined);
+          Icons.directions_run);
       expect(ActivityUtils.getActivityTypeIcon(ActivityType.walking),
-          Icons.nordic_walking);
+          Icons.directions_walk);
       expect(ActivityUtils.getActivityTypeIcon(ActivityType.cycling),
-          Icons.pedal_bike);
+          Icons.directions_bike);
     });
   });
 }