From dbdddb7630900500553ed94b15291ebff6a424ef Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 15 Aug 2023 13:30:06 -0700 Subject: [PATCH] refactor: animations, icon buttons --- .vscode/launch.json | 2 +- .../sections/community_articles_section.dart | 68 ++++++++++--------- .../sections/community_featured_section.dart | 18 +++-- .../sections/community_guide_section.dart | 60 ++++++++-------- .../community/widgets/guide/guide_widget.dart | 1 - .../presentation/shared/app_icon_button.dart | 23 +++++-- .../lib/presentation/theme/src/app_icons.dart | 6 ++ 7 files changed, 104 insertions(+), 74 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 30ea7e3..ad328ca 100644 --- 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 index e80e29f..1861de9 100644 --- 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 index b26e17c..aa0ef0d 100644 --- 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 index 7693524..43b877f 100644 --- 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 index f21ba23..14c6d65 100644 --- 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 index 815c288..5aa62cb 100644 --- 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 index e30eb63..049dd89 100644 --- 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');