From 7b70b69b1f52ad2af28fef2fa188a35334a25583 Mon Sep 17 00:00:00 2001 From: ahmadrns <106388520+ahmadrns@users.noreply.github.com> Date: Wed, 17 Aug 2022 14:57:55 +0500 Subject: [PATCH 1/2] solved issue of slidable in published & for sale NFT --- .../creator_hub/widgets/nfts_list_tile.dart | 279 +++++++++++------- 1 file changed, 172 insertions(+), 107 deletions(-) diff --git a/lib/screens/creator_hub/widgets/nfts_list_tile.dart b/lib/screens/creator_hub/widgets/nfts_list_tile.dart index 3c1142c..9fc9316 100644 --- a/lib/screens/creator_hub/widgets/nfts_list_tile.dart +++ b/lib/screens/creator_hub/widgets/nfts_list_tile.dart @@ -9,141 +9,206 @@ import 'package:easel_flutter/utils/enums.dart'; import 'package:easel_flutter/utils/extension_util.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:flutter_slidable/flutter_slidable.dart'; import 'package:flutter_svg/svg.dart'; import 'package:get_it/get_it.dart'; import 'package:model_viewer_plus/model_viewer_plus.dart'; +import 'package:provider/provider.dart'; import 'package:shimmer_animation/shimmer_animation.dart'; -class NFTsListTile extends StatelessWidget { +class NFTsListTile extends StatefulWidget { final NFT publishedNFT; const NFTsListTile({Key? key, required this.publishedNFT}) : super(key: key); + @override + State createState() => _NFTsListTileState(); +} + +class _NFTsListTileState extends State { EaselProvider get _easelProvider => GetIt.I.get(); void buildBottomSheet({required BuildContext context}) { - final bottomSheet = BuildPublishedNFTsBottomSheet(context: context, nft: publishedNFT, easelProvider: _easelProvider); + final bottomSheet = BuildPublishedNFTsBottomSheet(context: context, nft: widget.publishedNFT, easelProvider: _easelProvider); bottomSheet.show(); } @override Widget build(BuildContext context) { - return Container( - margin: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.w), - decoration: BoxDecoration(color: EaselAppTheme.kWhite, boxShadow: [ - BoxShadow( - color: Colors.black.withOpacity(0.3), - offset: const Offset(0.0, 1.0), - blurRadius: 4.0, + return Slidable( + key: ValueKey(widget.publishedNFT.id), + closeOnScroll: false, + endActionPane: ActionPane( + extentRatio: 0.3, + motion: const ScrollMotion(), + children: [ + buildSlidableAction( + context, + callback: () { + onViewOnPylonsPressed(nft: widget.publishedNFT); + }, + icon: kSvgPylonsLogo, ), - ]), - child: Padding( - padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 15.h), - child: Row( - children: [ - SizedBox( - height: 45.h, - width: 45.h, - child: NftTypeBuilder( - onImage: (context) => CachedNetworkImage( - errorWidget: (context, url, error) => Align( - child: SvgPicture.asset( - kSvgNftFormatImage, - color: EaselAppTheme.kBlack, - ), - ), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - imageUrl: publishedNFT.url.changeDomain(), - fit: BoxFit.cover, - ), - onVideo: (context) => CachedNetworkImage( - fit: BoxFit.fill, - imageUrl: publishedNFT.thumbnailUrl.changeDomain(), - errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - ), - onPdf: (context) => CachedNetworkImage( - fit: BoxFit.fill, - imageUrl: publishedNFT.thumbnailUrl, - errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - ), - onAudio: (context) => CachedNetworkImage( - fit: BoxFit.fill, - imageUrl: publishedNFT.thumbnailUrl.changeDomain(), - errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - ), - on3D: (context) => ModelViewer( - src: publishedNFT.url.changeDomain(), - backgroundColor: EaselAppTheme.kWhite, - ar: false, - autoRotate: false, - cameraControls: false, - ), - assetType: publishedNFT.assetType.toAssetTypeEnum(), - )), - SizedBox( - width: 10.w, - ), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - publishedNFT.name, - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: EaselAppTheme.titleStyle.copyWith(fontSize: isTablet ? 13.sp : 18.sp), - ), - SizedBox( - height: 6.h, - ), - Row( - children: [ - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(3.h), - color: EaselAppTheme.kDarkGreen, - ), - padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 3.h), - child: Text( - "publish".tr(), - style: EaselAppTheme.titleStyle.copyWith(color: EaselAppTheme.kWhite, fontSize: isTablet ? 8.sp : 11.sp), + buildSlidableAction( + context, + callback: () { + onViewOnIPFSPressed(nft: widget.publishedNFT, context: context); + }, + icon: kSvgIpfsLogo, + isSvg: false, + ), + ], + ), + child: Container( + margin: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.w), + decoration: BoxDecoration(color: EaselAppTheme.kWhite, boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.3), + offset: const Offset(0.0, 1.0), + blurRadius: 4.0, + ), + ]), + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 15.h), + child: Row( + children: [ + SizedBox( + height: 45.h, + width: 45.h, + child: NftTypeBuilder( + onImage: (context) => CachedNetworkImage( + errorWidget: (context, url, error) => Align( + child: SvgPicture.asset( + kSvgNftFormatImage, + color: EaselAppTheme.kBlack, ), ), - SizedBox(width: 9.w), - if (publishedNFT.isEnabled && publishedNFT.amountMinted < int.parse(publishedNFT.quantity)) + placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), + imageUrl: widget.publishedNFT.url.changeDomain(), + fit: BoxFit.cover, + ), + onVideo: (context) => CachedNetworkImage( + fit: BoxFit.fill, + imageUrl: widget.publishedNFT.thumbnailUrl.changeDomain(), + errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), + placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), + ), + onPdf: (context) => CachedNetworkImage( + fit: BoxFit.fill, + imageUrl: widget.publishedNFT.thumbnailUrl, + errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), + placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), + ), + onAudio: (context) => CachedNetworkImage( + fit: BoxFit.fill, + imageUrl: widget.publishedNFT.thumbnailUrl.changeDomain(), + errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), + placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), + ), + on3D: (context) => ModelViewer( + src: widget.publishedNFT.url.changeDomain(), + backgroundColor: EaselAppTheme.kWhite, + ar: false, + autoRotate: false, + cameraControls: false, + ), + assetType: widget.publishedNFT.assetType.toAssetTypeEnum(), + )), + SizedBox( + width: 10.w, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + widget.publishedNFT.name, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: EaselAppTheme.titleStyle.copyWith(fontSize: isTablet ? 13.sp : 18.sp), + ), + SizedBox( + height: 6.h, + ), + Row( + children: [ Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(3.h), + color: EaselAppTheme.kDarkGreen, + ), padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 3.h), child: Text( - "for_sale".tr(), + "publish".tr(), style: EaselAppTheme.titleStyle.copyWith(color: EaselAppTheme.kWhite, fontSize: isTablet ? 8.sp : 11.sp), ), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(3.h), - color: EaselAppTheme.kBlue, - ), - ) - ], - ), - ], + ), + SizedBox(width: 9.w), + if (widget.publishedNFT.isEnabled && widget.publishedNFT.amountMinted < int.parse(widget.publishedNFT.quantity)) + Container( + padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 3.h), + child: Text( + "for_sale".tr(), + style: EaselAppTheme.titleStyle.copyWith(color: EaselAppTheme.kWhite, fontSize: isTablet ? 8.sp : 11.sp), + ), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(3.h), + color: EaselAppTheme.kBlue, + ), + ) + ], + ), + ], + ), ), - ), - SizedBox( - width: 10.w, - ), - InkWell( - onTap: () => buildBottomSheet(context: context), - child: Padding( - padding: EdgeInsets.all(4.0.w), - child: SvgPicture.asset(kSvgMoreOption), - )) - ], - ), - )); + SizedBox( + width: 10.w, + ), + InkWell( + onTap: () => buildBottomSheet(context: context), + child: Padding( + padding: EdgeInsets.all(4.0.w), + child: SvgPicture.asset(kSvgMoreOption), + )) + ], + ), + )), + ); + } + + Widget buildSlidableAction(BuildContext context, {required VoidCallback callback, required String icon, bool isSvg = true}) { + return Expanded( + child: InkWell( + onTap: callback, + child: isSvg ? SvgPicture.asset(icon) : Image.asset(icon), + ), + ); + } + + void onViewOnIPFSPressed({required BuildContext context, required NFT nft}) async { + switch (nft.assetType) { + case k3dText: + case kPdfText: + await Clipboard.setData(ClipboardData(text: nft.cid)); + if (mounted) { + ScaffoldMessenger.of(context) + ..hideCurrentSnackBar() + ..showSnackBar(SnackBar(content: Text("copied_to_clipboard".tr()))); + } + break; + default: + final easelProvider = Provider.of(context, listen: false); + await easelProvider.repository.launchMyUrl(url: nft.url.changeDomain()); + } + } + + void onViewOnPylonsPressed({required NFT nft}) async { + final easelProvider = Provider.of(context, listen: false); + String url = nft.recipeID.generateEaselLinkForOpeningInPylonsApp(cookbookId: nft.cookbookID); + await easelProvider.repository.launchMyUrl(url: url); } } From 21cced5b5c11adcbbfd7fbdf21870f54cc8b2cf8 Mon Sep 17 00:00:00 2001 From: ahmadrns <106388520+ahmadrns@users.noreply.github.com> Date: Wed, 17 Aug 2022 16:55:02 +0500 Subject: [PATCH 2/2] closing slider when user perform an action --- .../creator_hub/widgets/draft_list_tile.dart | 16 +++--- .../creator_hub/widgets/nfts_list_tile.dart | 57 +++++++------------ lib/utils/easel_app_theme.dart | 5 +- pubspec.yaml | 5 ++ 4 files changed, 34 insertions(+), 49 deletions(-) diff --git a/lib/screens/creator_hub/widgets/draft_list_tile.dart b/lib/screens/creator_hub/widgets/draft_list_tile.dart index 955f6d8..8b1b3ce 100644 --- a/lib/screens/creator_hub/widgets/draft_list_tile.dart +++ b/lib/screens/creator_hub/widgets/draft_list_tile.dart @@ -22,6 +22,7 @@ import 'package:shimmer_animation/shimmer_animation.dart'; class DraftListTile extends StatefulWidget { final NFT nft; final CreatorHubViewModel viewModel; + const DraftListTile({Key? key, required this.nft, required this.viewModel}) : super(key: key); @override @@ -40,7 +41,7 @@ class _DraftListTileState extends State { children: [ buildSlidableAction( context, - callback: () { + callback: (ctx) { final DeleteDialog deleteDialog = DeleteDialog(contextt: context, nft: widget.nft); deleteDialog.show(); }, @@ -48,7 +49,7 @@ class _DraftListTileState extends State { ), buildSlidableAction( context, - callback: () { + callback: (context) { onViewOnIPFSPressed(nft: widget.nft, context: context); }, icon: kSvgIpfsLogo, @@ -121,12 +122,11 @@ class _DraftListTileState extends State { ); } - Widget buildSlidableAction(BuildContext context, {required VoidCallback callback, required String icon, bool isSvg = true}) { - return Expanded( - child: InkWell( - onTap: callback, - child: isSvg ? SvgPicture.asset(icon) : Image.asset(icon), - ), + Widget buildSlidableAction(BuildContext context, {required Function(BuildContext) callback, required String icon, bool isSvg = true}) { + return SlidableAction( + onPressed: callback, + label: isSvg ? SvgPicture.asset(icon) : Image.asset(icon), + backgroundColor: EaselAppTheme.kTransparent, ); } diff --git a/lib/screens/creator_hub/widgets/nfts_list_tile.dart b/lib/screens/creator_hub/widgets/nfts_list_tile.dart index 9fc9316..2b2bc5d 100644 --- a/lib/screens/creator_hub/widgets/nfts_list_tile.dart +++ b/lib/screens/creator_hub/widgets/nfts_list_tile.dart @@ -47,14 +47,14 @@ class _NFTsListTileState extends State { children: [ buildSlidableAction( context, - callback: () { + callback: (context) { onViewOnPylonsPressed(nft: widget.publishedNFT); }, icon: kSvgPylonsLogo, ), buildSlidableAction( context, - callback: () { + callback: (context) { onViewOnIPFSPressed(nft: widget.publishedNFT, context: context); }, icon: kSvgIpfsLogo, @@ -79,35 +79,10 @@ class _NFTsListTileState extends State { height: 45.h, width: 45.h, child: NftTypeBuilder( - onImage: (context) => CachedNetworkImage( - errorWidget: (context, url, error) => Align( - child: SvgPicture.asset( - kSvgNftFormatImage, - color: EaselAppTheme.kBlack, - ), - ), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - imageUrl: widget.publishedNFT.url.changeDomain(), - fit: BoxFit.cover, - ), - onVideo: (context) => CachedNetworkImage( - fit: BoxFit.fill, - imageUrl: widget.publishedNFT.thumbnailUrl.changeDomain(), - errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - ), - onPdf: (context) => CachedNetworkImage( - fit: BoxFit.fill, - imageUrl: widget.publishedNFT.thumbnailUrl, - errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - ), - onAudio: (context) => CachedNetworkImage( - fit: BoxFit.fill, - imageUrl: widget.publishedNFT.thumbnailUrl.changeDomain(), - errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), - placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), - ), + onImage: (context) => buildCachedNetworkImage(widget.publishedNFT.url.changeDomain()), + onVideo: (context) => buildCachedNetworkImage(widget.publishedNFT.thumbnailUrl.changeDomain()), + onPdf: (context) => buildCachedNetworkImage(widget.publishedNFT.thumbnailUrl.changeDomain()), + onAudio: (context) => buildCachedNetworkImage(widget.publishedNFT.thumbnailUrl.changeDomain()), on3D: (context) => ModelViewer( src: widget.publishedNFT.url.changeDomain(), backgroundColor: EaselAppTheme.kWhite, @@ -179,12 +154,20 @@ class _NFTsListTileState extends State { ); } - Widget buildSlidableAction(BuildContext context, {required VoidCallback callback, required String icon, bool isSvg = true}) { - return Expanded( - child: InkWell( - onTap: callback, - child: isSvg ? SvgPicture.asset(icon) : Image.asset(icon), - ), + CachedNetworkImage buildCachedNetworkImage(String url) { + return CachedNetworkImage( + fit: BoxFit.fill, + imageUrl: url, + errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)), + placeholder: (context, url) => Shimmer(color: EaselAppTheme.cardBackground, child: const SizedBox.expand()), + ); + } + + Widget buildSlidableAction(BuildContext context, {required Function(BuildContext) callback, required String icon, bool isSvg = true}) { + return SlidableAction( + onPressed: callback, + label: isSvg ? SvgPicture.asset(icon) : Image.asset(icon), + backgroundColor: EaselAppTheme.kTransparent, ); } diff --git a/lib/utils/easel_app_theme.dart b/lib/utils/easel_app_theme.dart index 1574275..d1ef16d 100644 --- a/lib/utils/easel_app_theme.dart +++ b/lib/utils/easel_app_theme.dart @@ -40,8 +40,6 @@ class EaselAppTheme { static const Color kPurple = Color(0xFF4421CC); static const Color kHashtagColor = Color(0xFFB6B6E8); - - static const String universalSansFamily = "UniversalSans"; static ThemeData theme(BuildContext context) => ThemeData( @@ -56,7 +54,7 @@ class EaselAppTheme { static Color cardBackgroundSelected = const Color(0x801212C4).withOpacity(0.2); static TextStyle titleStyle = TextStyle( - fontSize: 18.sp, + fontSize: 18.sp, fontWeight: FontWeight.w800, color: EaselAppTheme.kBlack, fontFamily: universalSansFamily, @@ -69,5 +67,4 @@ class EaselAppTheme { ); static TextStyle kDeleteHeaderTextStyle = TextStyle(fontSize: 14.sp, fontFamily: 'UniversalSans', color: EaselAppTheme.kWhite, fontWeight: FontWeight.w600); - } diff --git a/pubspec.yaml b/pubspec.yaml index 96868ed..3c56dbb 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -208,3 +208,8 @@ flutter: # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages + +dependency_overrides: + flutter_slidable: + git: + url: https://github.com/sumitsharansatsangi/flutter_slidable.git