calendar_preview_view.dart 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. import 'package:clean/base/base_page.dart';
  2. import 'package:clean/module/calendar/preview/calendar_preview_controller.dart';
  3. import 'package:flutter/Material.dart';
  4. import 'package:flutter/src/widgets/framework.dart';
  5. import 'package:flutter_card_swiper/flutter_card_swiper.dart';
  6. import 'package:flutter_screenutil/flutter_screenutil.dart';
  7. import 'package:get/get.dart';
  8. import 'package:lottie/lottie.dart';
  9. import 'package:wechat_assets_picker/wechat_assets_picker.dart';
  10. import '../../../resource/assets.gen.dart';
  11. import '../../../router/app_pages.dart';
  12. import '../../people_photo/photo_group.dart';
  13. import 'package:video_player/video_player.dart';
  14. class CalendarPreviewPage extends BasePage<CalendarPreviewController> {
  15. const CalendarPreviewPage({Key? key}) : super(key: key);
  16. static void start(
  17. {required PhotoGroup photoGroup, required String currentImageId}) {
  18. Get.toNamed(RoutePath.calendarPreview, arguments: {
  19. "photoGroup": photoGroup,
  20. "currentImageId": currentImageId,
  21. });
  22. }
  23. @override
  24. bool statusBarDarkFont() {
  25. return false;
  26. }
  27. @override
  28. bool immersive() {
  29. return true;
  30. }
  31. @override
  32. Widget buildBody(BuildContext context) {
  33. return Stack(children: [
  34. PopScope(
  35. canPop: false,
  36. onPopInvokedWithResult: (didPop, result) {
  37. if (didPop) {
  38. return;
  39. }
  40. controller.clickBack();
  41. },
  42. child: SafeArea(
  43. child: Obx(() {
  44. if (controller.isSwiperEnd.value ||
  45. controller.photoGroup.value.images.isEmpty) {
  46. return onSwiperEndCard();
  47. } else {
  48. return Column(
  49. children: [
  50. _titleCard(),
  51. Spacer(),
  52. SizedBox(
  53. width: 314.w,
  54. height: 392.h,
  55. child: CardSwiper(
  56. scale: 0.8,
  57. allowedSwipeDirection: AllowedSwipeDirection.only(
  58. right: true,
  59. left: true,
  60. ),
  61. isLoop: false,
  62. backCardOffset: Offset(0.w, -20.h),
  63. controller: controller.cardSwiperController,
  64. cardsCount: controller.photoGroup.value.images.length,
  65. onSwipe: controller.onSwipe,
  66. onUndo: controller.onSwiperUndo,
  67. numberOfCardsDisplayed:
  68. (controller.photoGroup.value.images.length == 1)
  69. ? 1
  70. : 2,
  71. onEnd: controller.onSwiperEnd,
  72. cardBuilder: (context, index, horizontalOffsetPercentage,
  73. verticalOffsetPercentage) {
  74. final assetEntity =
  75. controller.photoGroup.value.images[index];
  76. return Stack(
  77. children: [
  78. ClipRRect(
  79. borderRadius: BorderRadius.circular(20.r),
  80. child:
  81. // 判断这个是不是视频
  82. assetEntity.type == AssetType.video
  83. ? Stack(
  84. alignment: Alignment.center,
  85. children: [
  86. AssetEntityImage(
  87. assetEntity,
  88. width: 314.w,
  89. height: 392.h,
  90. fit: BoxFit.cover,
  91. ),
  92. GestureDetector(
  93. // 点击播放视频
  94. onTap: () => controller.playVideo(assetEntity),
  95. child: Icon(
  96. Icons.play_circle_filled,
  97. size: 50.w,
  98. color: Colors.white.withValues(alpha: 0.8),
  99. ),
  100. )
  101. ],
  102. )
  103. : AssetEntityImage(
  104. assetEntity,
  105. width: 314.w,
  106. height: 392.h,
  107. fit: BoxFit.cover,
  108. isOriginal: true,
  109. errorBuilder: (context, error, stackTrace) {
  110. debugPrint('AssetEntityImage error $error');
  111. return Container(
  112. );
  113. },
  114. )
  115. ),
  116. if (horizontalOffsetPercentage != 0)
  117. Positioned(
  118. top: 0,
  119. right: horizontalOffsetPercentage < -10.w
  120. ? 0
  121. : null,
  122. left: horizontalOffsetPercentage > 10.w
  123. ? 0
  124. : null,
  125. child: Container(
  126. child: Column(
  127. children: [
  128. (horizontalOffsetPercentage < -10.w)
  129. ? Assets.images.iconPhotoPreviewDelete
  130. .image(
  131. width: 60.w,
  132. height: 60.w,
  133. )
  134. : (horizontalOffsetPercentage > 10.w)
  135. ? Assets.images.iconPhotoPreviewKeep
  136. .image(
  137. width: 60.w,
  138. height: 60.w,
  139. )
  140. : SizedBox(),
  141. (horizontalOffsetPercentage < -10.w)
  142. ? Text(
  143. 'Delete ',
  144. style: TextStyle(
  145. color: Colors.white,
  146. fontSize: 24.sp,
  147. fontWeight: FontWeight.w500,
  148. ),
  149. )
  150. : (horizontalOffsetPercentage > 10.w)
  151. ? Text(
  152. 'Keep',
  153. style: TextStyle(
  154. color: Colors.white,
  155. fontSize: 24.sp,
  156. fontWeight: FontWeight.w500,
  157. ),
  158. )
  159. : SizedBox(),
  160. ],
  161. )),
  162. ),
  163. ],
  164. );
  165. },
  166. ),
  167. ),
  168. Spacer(),
  169. bottomButtonCard(),
  170. _bottomBarCard(),
  171. ],
  172. );
  173. }
  174. }),
  175. ),
  176. ),
  177. Obx(() {
  178. if (controller.isSwiperEnd.value ||
  179. controller.photoGroup.value.images.isEmpty) {
  180. return IgnorePointer(
  181. child: Assets.images.bgPhotoSelectedPreviewFinish.image(
  182. width: 360.w,
  183. ),
  184. );
  185. } else {
  186. return IgnorePointer(
  187. child: Assets.images.bgHome.image(
  188. width: 360.w,
  189. ),
  190. );
  191. }
  192. }),
  193. ]);
  194. }
  195. Widget _titleCard() {
  196. return Container(
  197. alignment: Alignment.centerLeft,
  198. padding: EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w),
  199. child: Column(
  200. crossAxisAlignment: CrossAxisAlignment.start,
  201. children: [
  202. Row(
  203. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  204. children: [
  205. GestureDetector(
  206. onTap: controller.clickBack,
  207. child: Assets.images.iconBackArrow.image(
  208. width: 28.w,
  209. height: 28.h,
  210. ),
  211. ),
  212. Obx(() => Row(
  213. mainAxisAlignment: MainAxisAlignment.center,
  214. children: [
  215. Text(
  216. '${controller.groupIndex.value + 1}',
  217. textAlign: TextAlign.center,
  218. style: TextStyle(
  219. color: Colors.white,
  220. fontSize: 16.sp,
  221. fontWeight: FontWeight.w700,
  222. ),
  223. ),
  224. Text(
  225. ' / ${controller.photoGroup.value.images.length}',
  226. textAlign: TextAlign.center,
  227. style: TextStyle(
  228. color: Colors.white.withValues(alpha: 0.6),
  229. fontSize: 16.sp,
  230. fontWeight: FontWeight.w500,
  231. ),
  232. ),
  233. ],
  234. )),
  235. GestureDetector(
  236. onTap: controller.recoverSelectPhoto,
  237. child: Assets.images.iconPreviewRecover.image(
  238. width: 30.w,
  239. height: 30.h,
  240. ),
  241. ),
  242. ],
  243. ),
  244. SizedBox(height: 12.h),
  245. ],
  246. ),
  247. );
  248. }
  249. Widget _bottomBarCard() {
  250. return GestureDetector(
  251. onTap:controller.clickJumpSelected,
  252. child:
  253. Container(
  254. width: 360.w,
  255. height: 81.h,
  256. padding: EdgeInsets.symmetric(horizontal: 16.w),
  257. decoration: ShapeDecoration(
  258. color: Color(0xFF23232A),
  259. shape: RoundedRectangleBorder(
  260. side: BorderSide(
  261. width: 1.w, color: Colors.white.withValues(alpha: 0.1)),
  262. borderRadius: BorderRadius.only(
  263. topLeft: Radius.circular(14.r),
  264. topRight: Radius.circular(14.r),
  265. ),
  266. ),
  267. ),
  268. child: Row(
  269. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  270. children: [
  271. Obx(() {
  272. return Text(
  273. '${controller.photoGroup.value.selectedPhotosIds.length} files selected (${controller.selectedFilesSizeString} )',
  274. textAlign: TextAlign.center,
  275. style: TextStyle(
  276. color: Colors.white.withValues(alpha: 0.9),
  277. fontSize: 13.sp,
  278. fontWeight: FontWeight.w500,
  279. ),
  280. );
  281. }),
  282. GestureDetector(
  283. onTap: controller.clickDelete,
  284. child: Container(
  285. width: 108.w,
  286. height: 38.h,
  287. decoration: ShapeDecoration(
  288. color: Color(0xFF0279FB),
  289. shape: RoundedRectangleBorder(
  290. borderRadius: BorderRadius.circular(10.r),
  291. ),
  292. ),
  293. child: Row(
  294. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  295. children: [
  296. Text(
  297. 'Delete',
  298. textAlign: TextAlign.center,
  299. style: TextStyle(
  300. color: Colors.white,
  301. fontSize: 16.sp,
  302. fontWeight: FontWeight.w500,
  303. ),
  304. ),
  305. Assets.images.iconDelete.image(
  306. width: 18.w,
  307. height: 18.h,
  308. ),
  309. ],
  310. ),
  311. )),
  312. ],
  313. ),
  314. ));
  315. }
  316. Widget bottomButtonCard() {
  317. return Container(
  318. margin: EdgeInsets.only(bottom: 54.h),
  319. child: Row(
  320. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  321. children: [
  322. GestureDetector(
  323. onTap: () => controller.clickSelect(),
  324. child: Assets.images.iconPreviewSelect.image(
  325. width: 62.w,
  326. height: 62.h,
  327. ),
  328. ),
  329. GestureDetector(
  330. onTap: () => controller.clickUnselect(),
  331. child: Assets.images.iconPreviewNoSelect.image(
  332. width: 62.w,
  333. height: 62.h,
  334. ),
  335. ),
  336. ],
  337. ),
  338. );
  339. }
  340. Widget onSwiperEndCard() {
  341. return Column(
  342. children: [
  343. Container(
  344. child: Lottie.asset(
  345. Assets.anim.animFireworks,
  346. controller: controller.animationController,
  347. height: 351.h,
  348. repeat: false,
  349. ),
  350. ),
  351. Visibility(
  352. visible: controller.animationIsComplete.value,
  353. child: Center(
  354. child: Column(
  355. crossAxisAlignment: CrossAxisAlignment.center,
  356. mainAxisAlignment: MainAxisAlignment.center,
  357. children: [
  358. Text(
  359. 'Perfect!',
  360. textAlign: TextAlign.center,
  361. style: TextStyle(
  362. color: Colors.white,
  363. fontSize: 32.sp,
  364. fontWeight: FontWeight.w700,
  365. ),
  366. ),
  367. SizedBox(height: 16.h),
  368. SizedBox(
  369. child: Row(
  370. mainAxisAlignment: MainAxisAlignment.center,
  371. children: [
  372. Container(
  373. clipBehavior: Clip.antiAlias,
  374. decoration: BoxDecoration(),
  375. child:
  376. Assets.images.iconPreviewSwiperEndFirework.image(
  377. width: 40.w,
  378. height: 40.w,
  379. ),
  380. ),
  381. SizedBox(width: 4.w),
  382. Text(
  383. 'All Similar and Redundant\nPhotos Cleared',
  384. textAlign: TextAlign.center,
  385. style: TextStyle(
  386. color: Colors.white.withValues(alpha: 0.9),
  387. fontSize: 16.sp,
  388. fontWeight: FontWeight.w400,
  389. ),
  390. ),
  391. SizedBox(width: 4.w),
  392. Container(
  393. clipBehavior: Clip.antiAlias,
  394. decoration: BoxDecoration(),
  395. child:
  396. Assets.images.iconPreviewSwiperEndFirework.image(
  397. width: 40.w,
  398. height: 40.w,
  399. ),
  400. ),
  401. ],
  402. ),
  403. ),
  404. ],
  405. ),
  406. )),
  407. Spacer(
  408. flex: 5,
  409. ),
  410. controller.photoGroup.value.images.isEmpty
  411. ? SizedBox()
  412. : _bottomBarCard(),
  413. ],
  414. );
  415. }
  416. }