ft: generate skeletons for profile

Signed-off-by: Isaac Obella <wizlif@users.noreply.github.com>
CollActionteam · Jul 7, 2023 · 7a1957a · 7a1957a
1 parent 2d503d3
commit 7a1957a
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 83 deletions.
diff --git a/lib/presentation/profile/widget/commitments_tab.dart b/lib/presentation/profile/widget/commitments_tab.dart
@@ -29,7 +29,7 @@ class CommitmentsTab extends StatelessWidget {
           children: [
             if (crowdActions?.isEmpty ?? true) ...[
               const SizedBox(height: 40),
-              CommitmentCardShimmer(),
+              CommitmentCardSkeleton(),
               const SizedBox(height: 40),
             ] else ...[
               Padding(

diff --git a/lib/presentation/profile/widget/crowdactions_tab.dart b/lib/presentation/profile/widget/crowdactions_tab.dart
@@ -27,7 +27,7 @@ class CrowdActionsTab extends StatelessWidget {
           children: [
             if (crowdActions?.isEmpty ?? true) ...[
               const SizedBox(height: 40),
-              MicroCrowdActionCardLoading(),
+              MicroCrowdactionSkeleton(),
               const SizedBox(height: 40),
             ] else ...[
               Padding(

diff --git a/lib/presentation/shared_widgets/micro_crowdaction_card_loading.dart b/lib/presentation/shared_widgets/micro_crowdaction_card_loading.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:shimmer/shimmer.dart';
 
-import 'accent_chip.dart';
+import '../themes/constants.dart';
 
 class MicroCrowdActionCardLoading extends StatelessWidget {
   const MicroCrowdActionCardLoading({super.key});
@@ -11,64 +11,75 @@ class MicroCrowdActionCardLoading extends StatelessWidget {
     return Shimmer.fromColors(
       baseColor: Colors.black.withOpacity(0.1),
       highlightColor: Colors.white.withOpacity(0.2),
-      child: Container(
-        height: 148,
-        decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(15),
-            border: Border.all(color: Colors.black)),
-        child: Row(
-          children: [
-            Container(
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(15),
-                color: Colors.black,
-              ),
-              margin: const EdgeInsets.only(left: 10),
-              height: 128,
-              width: 100,
+      child: MicroCrowdactionSkeleton(),
+    );
+  }
+}
+
+class MicroCrowdactionSkeleton extends StatelessWidget {
+  final Color? color;
+  const MicroCrowdactionSkeleton({super.key, this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 148,
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(15),
+          border: Border.all(color: color ?? kPrimaryColor0)),
+      child: Row(
+        children: [
+          Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(15),
+              color: color ?? kPrimaryColor0,
             ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 10,
-                  vertical: 10,
-                ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Container(
-                      margin: const EdgeInsets.only(bottom: 3),
-                      decoration: BoxDecoration(
-                          color: Colors.black,
-                          borderRadius: BorderRadius.circular(24)),
-                      height: 35,
-                      width: MediaQuery.of(context).size.width * .25,
-                    ),
-                    ...List.generate(
-                      2,
-                      (index) => Container(
-                        margin: const EdgeInsets.only(top: 6),
-                        decoration: BoxDecoration(
-                            color: Colors.black,
-                            borderRadius: BorderRadius.circular(8)),
-                        height: 20,
-                        width: MediaQuery.of(context).size.width * .6,
-                      ),
+            margin: const EdgeInsets.only(left: 10),
+            height: 128,
+            width: 100,
+          ),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(
+                horizontal: 10,
+                vertical: 10,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Container(
+                    margin: const EdgeInsets.only(bottom: 3),
+                    decoration: BoxDecoration(
+                      color: color ?? kPrimaryColor0,
+                      borderRadius: BorderRadius.circular(24),
                     ),
-                    Container(
+                    height: 35,
+                    width: MediaQuery.of(context).size.width * .25,
+                  ),
+                  ...List.generate(
+                    2,
+                    (index) => Container(
                       margin: const EdgeInsets.only(top: 6),
                       decoration: BoxDecoration(
-                          color: Colors.black,
+                          color: color ?? kPrimaryColor0,
                           borderRadius: BorderRadius.circular(8)),
                       height: 20,
-                      width: MediaQuery.of(context).size.width * .2,
-                    )
-                  ],
-                ),
+                      width: MediaQuery.of(context).size.width * .6,
+                    ),
+                  ),
+                  Container(
+                    margin: const EdgeInsets.only(top: 6),
+                    decoration: BoxDecoration(
+                        color: color ?? kPrimaryColor0,
+                        borderRadius: BorderRadius.circular(8)),
+                    height: 20,
+                    width: MediaQuery.of(context).size.width * .2,
+                  )
+                ],
               ),
-            )
-          ],
-        ),
+            ),
+          )
+        ],
       ),
     );
   }

diff --git a/lib/presentation/shared_widgets/shimmers/commitment_card_shimmer.dart b/lib/presentation/shared_widgets/shimmers/commitment_card_shimmer.dart
@@ -7,33 +7,45 @@ import 'title_shimmer_line.dart';
 class CommitmentCardShimmer extends StatelessWidget {
   const CommitmentCardShimmer();
 
+  @override
+  Widget build(BuildContext context) {
+    return Shimmer.fromColors(
+      baseColor: kPrimaryColor0,
+      highlightColor: kAlmostTransparent,
+      child: CommitmentCardSkeleton(),
+    );
+  }
+}
+
+class CommitmentCardSkeleton extends StatelessWidget {
+  final Color? color;
+  const CommitmentCardSkeleton({super.key, this.color});
+
   @override
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(20.0),
-        color: kSecondaryColor,
-        border: Border.all(color: kPrimaryColor0),
+        border: Border.all(color: color ?? kPrimaryColor0),
       ),
-      padding: const EdgeInsets.all(5.0),
+      padding: const EdgeInsets.all(15.0),
       child: Row(
         children: [
           Container(
             padding: const EdgeInsets.all(15.0),
-            decoration: const BoxDecoration(
+            decoration: BoxDecoration(
               shape: BoxShape.circle,
-              color: kSecondaryColor,
+              color: color ?? kPrimaryColor0,
             ),
             alignment: Alignment.center,
-            child: Shimmer.fromColors(
-              baseColor: kPrimaryColor0,
-              highlightColor: kAlmostTransparent,
-              child: const CircleAvatar(
-                radius: 75 / 2,
-              ),
+            child: const CircleAvatar(
+              radius: 65 / 2,
+              backgroundColor: kPrimaryColor0,
             ),
           ),
-          const Spacer(),
+          const SizedBox(
+            width: 10,
+          ),
           Container(
             width: MediaQuery.of(context).size.width * 0.5,
             constraints: const BoxConstraints(
@@ -43,26 +55,18 @@ class CommitmentCardShimmer extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Shimmer.fromColors(
-                  baseColor: kPrimaryColor0,
-                  highlightColor: Colors.white.withOpacity(0.2),
-                  child: TitleShimmerLine(
-                    width: MediaQuery.of(context).size.width * 0.4,
-                  ),
+                TitleShimmerLine(
+                  color: color ?? kPrimaryColor0,
+                  width: MediaQuery.of(context).size.width * .4,
                 ),
                 const SizedBox(height: 5),
-                Shimmer.fromColors(
-                  baseColor: kPrimaryColor0,
-                  highlightColor: Colors.white.withOpacity(0.2),
-                  child: TitleShimmerLine(
-                    width: MediaQuery.of(context).size.width * 0.5,
-                  ),
+                TitleShimmerLine(
+                  color: color ?? kPrimaryColor0,
+                  width: MediaQuery.of(context).size.width * .5,
                 ),
               ],
             ),
           ),
-          const Spacer(),
-          const SizedBox(height: 32, width: 32),
         ],
       ),
     );

diff --git a/lib/presentation/shared_widgets/shimmers/title_shimmer_line.dart b/lib/presentation/shared_widgets/shimmers/title_shimmer_line.dart
@@ -5,10 +5,12 @@ import '../../themes/constants.dart';
 class TitleShimmerLine extends StatelessWidget {
   final double width;
   final double height;
+  final Color? color;
 
   const TitleShimmerLine({
     required this.width,
     this.height = 24,
+    this.color,
   });
 
   @override
@@ -17,7 +19,7 @@ class TitleShimmerLine extends StatelessWidget {
       width: width,
       height: height,
       decoration: BoxDecoration(
-        color: kSecondaryTransparent,
+        color: color ?? kSecondaryTransparent,
         borderRadius: BorderRadius.circular(10),
       ),
     );

diff --git a/test/presentation/profile/commitments_tab_test.dart b/test/presentation/profile/commitments_tab_test.dart
@@ -1,5 +1,5 @@
 import 'package:collaction_app/presentation/profile/widget/commitments_tab.dart';
-import 'package:flutter/material.dart';
+import 'package:collaction_app/presentation/shared_widgets/shimmers/commitment_card_shimmer.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import '../../test_helper.dart';
@@ -12,7 +12,7 @@ void main() {
       await tester.pumpAndSettle();
 
       expect(find.byType(CommitmentsTab), findsOneWidget);
-      expect(find.byType(Image), findsOneWidget);
+      expect(find.byType(CommitmentCardSkeleton), findsOneWidget);
     });
 
     testWidgets('with user', (WidgetTester tester) async {