refactor: animations, icon buttons

jauntybrain · Aug 15, 2023 · dbdddb7 · dbdddb7
1 parent e98d4f9
commit dbdddb7
Showing 7 changed files with 104 additions and 74 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -2,7 +2,7 @@
 "version": "0.2.0",
   "configurations": [
     {
-      "name": "Hero (No Impeller)",
+      "name": "KnowWaste (No Impeller)",
       "request": "launch",
       "type": "dart",
       "flutterMode": "debug",

diff --git a/frontend/lib/presentation/features/community/pages/sections/community_articles_section.dart b/frontend/lib/presentation/features/community/pages/sections/community_articles_section.dart
@@ -40,38 +40,44 @@ class CommunityArticlesSection extends ConsumerWidget {
           ),
         ),
         const SizedBox(height: 10),
-        articlesState.when(
-          data: (articles) => GridView.builder(
-            shrinkWrap: true,
-            padding: const EdgeInsets.symmetric(horizontal: 20),
-            physics: const NeverScrollableScrollPhysics(),
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 2,
-              mainAxisExtent: 310,
-              mainAxisSpacing: 12,
-              crossAxisSpacing: 12,
+        AnimatedSwitcher(
+          duration: const Duration(milliseconds: 200),
+          child: Container(
+            key: ValueKey(articlesState),
+            child: articlesState.when(
+              data: (articles) => GridView.builder(
+                shrinkWrap: true,
+                padding: const EdgeInsets.symmetric(horizontal: 20),
+                physics: const NeverScrollableScrollPhysics(),
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 2,
+                  mainAxisExtent: 310,
+                  mainAxisSpacing: 12,
+                  crossAxisSpacing: 12,
+                ),
+                itemCount: articles.length,
+                itemBuilder: (context, index) => ArticleWidget(
+                  article: articles[index],
+                  onTap: context.pushArticle,
+                ),
+              ),
+              error: (e, tr) => Center(
+                child: e is ApiError ? Text((e).message) : const Text('Error occurred'),
+              ),
+              loading: () => GridView.builder(
+                shrinkWrap: true,
+                padding: const EdgeInsets.symmetric(horizontal: 20),
+                physics: const NeverScrollableScrollPhysics(),
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 2,
+                  mainAxisExtent: 270,
+                  mainAxisSpacing: 12,
+                  crossAxisSpacing: 12,
+                ),
+                itemCount: 4,
+                itemBuilder: (context, index) => const ArticleWidgetSkeleton(),
+              ),
             ),
-            itemCount: articles.length,
-            itemBuilder: (context, index) => ArticleWidget(
-              article: articles[index],
-              onTap: context.pushArticle,
-            ),
-          ),
-          error: (e, tr) => Center(
-            child: e is ApiError ? Text((e).message) : const Text('Error occurred'),
-          ),
-          loading: () => GridView.builder(
-            shrinkWrap: true,
-            padding: const EdgeInsets.symmetric(horizontal: 20),
-            physics: const NeverScrollableScrollPhysics(),
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 2,
-              mainAxisExtent: 270,
-              mainAxisSpacing: 12,
-              crossAxisSpacing: 12,
-            ),
-            itemCount: 4,
-            itemBuilder: (context, index) => const ArticleWidgetSkeleton(),
           ),
         ),
       ],

diff --git a/frontend/lib/presentation/features/community/pages/sections/community_featured_section.dart b/frontend/lib/presentation/features/community/pages/sections/community_featured_section.dart
@@ -40,12 +40,18 @@ class CommunityFeaturedSection extends ConsumerWidget {
             style: AppTextStyles.blackBlack22,
           ),
           const SizedBox(height: 10),
-          articleState.when(
-            data: (article) => article != null
-                ? ArticleWidget.large(article: article, onTap: context.pushArticle)
-                : articleContainer(text: 'Coming soon!'),
-            loading: () => const ArticleWidgetSkeleton.large(),
-            error: (e, tr) => articleContainer(text: e is ApiError ? (e).message : 'Error occurred'),
+          AnimatedSwitcher(
+            duration: const Duration(milliseconds: 200),
+            child: Container(
+              key: ValueKey(articleState),
+              child: articleState.when(
+                data: (article) => article != null
+                    ? ArticleWidget.large(article: article, onTap: context.pushArticle)
+                    : articleContainer(text: 'Coming soon!'),
+                loading: () => const ArticleWidgetSkeleton.large(),
+                error: (e, tr) => articleContainer(text: e is ApiError ? (e).message : 'Error occurred'),
+              ),
+            ),
           ),
         ],
       ),

diff --git a/frontend/lib/presentation/features/community/pages/sections/community_guide_section.dart b/frontend/lib/presentation/features/community/pages/sections/community_guide_section.dart
@@ -30,35 +30,39 @@ class CommunityGuidesSection extends ConsumerWidget {
           ),
         ),
         const SizedBox(height: 10),
-        SizedBox(
-          height: 190,
-          width: MediaQuery.of(context).size.width,
-          child: guidesState.when(
-            data: (guides) => MasonryGridView.count(
-              shrinkWrap: true,
-              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
-              scrollDirection: Axis.horizontal,
-              mainAxisSpacing: 12,
-              crossAxisSpacing: 12,
-              crossAxisCount: 2,
-              itemCount: guides.length,
-              itemBuilder: (context, index) => GuideWidget(
-                guide: guides[index],
-                onTap: context.pushGuide,
+        AnimatedSwitcher(
+          duration: const Duration(milliseconds: 200),
+          child: SizedBox(
+            key: ValueKey(guidesState),
+            height: 190,
+            width: MediaQuery.of(context).size.width,
+            child: guidesState.when(
+              data: (guides) => MasonryGridView.count(
+                shrinkWrap: true,
+                padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
+                scrollDirection: Axis.horizontal,
+                mainAxisSpacing: 12,
+                crossAxisSpacing: 12,
+                crossAxisCount: 2,
+                itemCount: guides.length,
+                itemBuilder: (context, index) => GuideWidget(
+                  guide: guides[index],
+                  onTap: context.pushGuide,
+                ),
+              ),
+              error: (e, tr) => Center(
+                child: e is ApiError ? Text((e).message) : const Text('Error occurred'),
+              ),
+              loading: () => MasonryGridView.count(
+                shrinkWrap: true,
+                padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
+                scrollDirection: Axis.horizontal,
+                mainAxisSpacing: 12,
+                crossAxisSpacing: 12,
+                crossAxisCount: 2,
+                itemCount: 4,
+                itemBuilder: (context, index) => const GuideWidgetSkeleton(),
               ),
-            ),
-            error: (e, tr) => Center(
-              child: e is ApiError ? Text((e).message) : const Text('Error occurred'),
-            ),
-            loading: () => MasonryGridView.count(
-              shrinkWrap: true,
-              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
-              scrollDirection: Axis.horizontal,
-              mainAxisSpacing: 12,
-              crossAxisSpacing: 12,
-              crossAxisCount: 2,
-              itemCount: 4,
-              itemBuilder: (context, index) => const GuideWidgetSkeleton(),
             ),
           ),
         ),

diff --git a/frontend/lib/presentation/features/community/widgets/guide/guide_widget.dart b/frontend/lib/presentation/features/community/widgets/guide/guide_widget.dart
@@ -1,6 +1,5 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:know_waste/models/guide/guide.dart';
 import 'package:know_waste/presentation/shared/bouncing.dart';

diff --git a/frontend/lib/presentation/shared/app_icon_button.dart b/frontend/lib/presentation/shared/app_icon_button.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
+import 'package:know_waste/presentation/theme/src/app_icons.dart';
 
 import 'bouncing.dart';
 
@@ -16,7 +16,7 @@ class AppIconButton extends StatelessWidget {
   });
 
   final VoidCallback onTap;
-  final IconData icon;
+  final dynamic icon;
   final double? radius, size, iconSize;
   final Color? fillColor, color;
 
@@ -27,16 +27,25 @@ class AppIconButton extends StatelessWidget {
       child: Container(
         width: size ?? 55,
         height: size ?? 55,
+        padding: const EdgeInsets.all(10),
         decoration: BoxDecoration(
           color: fillColor ?? Colors.white,
           borderRadius: BorderRadius.circular(radius ?? 18),
           border: Border.all(width: 0.4, color: const Color(0xffCFE1D6)),
         ),
-        child: Icon(
-          icon,
-          size: iconSize ?? 25,
-          color: color ?? const Color(0xff007029),
-        ),
+        child: icon is IconData
+            ? Icon(
+                icon as IconData,
+                size: iconSize ?? 25,
+                color: color ?? const Color(0xff007029),
+              )
+            : icon is String
+                ? AppIcons.icon(
+                    icon as String,
+                    size: iconSize ?? 25,
+                    color: color ?? const Color(0xff007029),
+                  )
+                : const SizedBox.shrink(),
       ),
     );
   }

diff --git a/frontend/lib/presentation/theme/src/app_icons.dart b/frontend/lib/presentation/theme/src/app_icons.dart
@@ -16,6 +16,12 @@ class AppIcons {
   static const String paper = 'paper.svg';
   static const String electronics = 'electronics.svg';
   static const String other = 'other.svg';
+  static const String signIn = 'sign-in.svg';
+  static const String settings = 'settings.svg';
+  static const String help = 'help.svg';
+  static const String scans = 'scans.svg';
+  static const String appleLogo = 'apple.svg';
+  static const String googleLogo = 'google.svg';
 
   /// Check if the icon is vector
   static bool isSvg(String path) => path.contains('svg');