calendar_preview_view.dart 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  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 Container(
  251. width: 360.w,
  252. height: 81.h,
  253. padding: EdgeInsets.symmetric(horizontal: 16.w),
  254. decoration: ShapeDecoration(
  255. color: Color(0xFF23232A),
  256. shape: RoundedRectangleBorder(
  257. side: BorderSide(
  258. width: 1.w, color: Colors.white.withValues(alpha: 0.1)),
  259. borderRadius: BorderRadius.only(
  260. topLeft: Radius.circular(14.r),
  261. topRight: Radius.circular(14.r),
  262. ),
  263. ),
  264. ),
  265. child: Row(
  266. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  267. children: [
  268. Obx(() {
  269. return Text(
  270. '${controller.photoGroup.value.selectedPhotosIds.length} files selected (${controller.selectedFilesSizeString} )',
  271. textAlign: TextAlign.center,
  272. style: TextStyle(
  273. color: Colors.white.withValues(alpha: 0.9),
  274. fontSize: 13.sp,
  275. fontWeight: FontWeight.w500,
  276. ),
  277. );
  278. }),
  279. GestureDetector(
  280. onTap: controller.clickDelete,
  281. child: Container(
  282. width: 108.w,
  283. height: 38.h,
  284. decoration: ShapeDecoration(
  285. color: Color(0xFF0279FB),
  286. shape: RoundedRectangleBorder(
  287. borderRadius: BorderRadius.circular(10.r),
  288. ),
  289. ),
  290. child: Row(
  291. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  292. children: [
  293. Text(
  294. 'Delete',
  295. textAlign: TextAlign.center,
  296. style: TextStyle(
  297. color: Colors.white,
  298. fontSize: 16.sp,
  299. fontWeight: FontWeight.w500,
  300. ),
  301. ),
  302. Assets.images.iconDelete.image(
  303. width: 18.w,
  304. height: 18.h,
  305. ),
  306. ],
  307. ),
  308. )),
  309. ],
  310. ),
  311. );
  312. }
  313. Widget bottomButtonCard() {
  314. return Container(
  315. margin: EdgeInsets.only(bottom: 54.h),
  316. child: Row(
  317. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  318. children: [
  319. GestureDetector(
  320. onTap: () => controller.clickSelect(),
  321. child: Assets.images.iconPreviewSelect.image(
  322. width: 62.w,
  323. height: 62.h,
  324. ),
  325. ),
  326. GestureDetector(
  327. onTap: () => controller.clickUnselect(),
  328. child: Assets.images.iconPreviewNoSelect.image(
  329. width: 62.w,
  330. height: 62.h,
  331. ),
  332. ),
  333. ],
  334. ),
  335. );
  336. }
  337. Widget onSwiperEndCard() {
  338. return Column(
  339. children: [
  340. Container(
  341. child: Lottie.asset(
  342. Assets.anim.animFireworks,
  343. controller: controller.animationController,
  344. height: 351.h,
  345. repeat: false,
  346. ),
  347. ),
  348. Visibility(
  349. visible: controller.animationIsComplete.value,
  350. child: Center(
  351. child: Column(
  352. crossAxisAlignment: CrossAxisAlignment.center,
  353. mainAxisAlignment: MainAxisAlignment.center,
  354. children: [
  355. Text(
  356. 'Perfect!',
  357. textAlign: TextAlign.center,
  358. style: TextStyle(
  359. color: Colors.white,
  360. fontSize: 32.sp,
  361. fontWeight: FontWeight.w700,
  362. ),
  363. ),
  364. SizedBox(height: 16.h),
  365. SizedBox(
  366. child: Row(
  367. mainAxisAlignment: MainAxisAlignment.center,
  368. children: [
  369. Container(
  370. clipBehavior: Clip.antiAlias,
  371. decoration: BoxDecoration(),
  372. child:
  373. Assets.images.iconPreviewSwiperEndFirework.image(
  374. width: 40.w,
  375. height: 40.w,
  376. ),
  377. ),
  378. SizedBox(width: 4.w),
  379. Text(
  380. 'All Similar and Redundant\nPhotos Cleared',
  381. textAlign: TextAlign.center,
  382. style: TextStyle(
  383. color: Colors.white.withValues(alpha: 0.9),
  384. fontSize: 16.sp,
  385. fontWeight: FontWeight.w400,
  386. ),
  387. ),
  388. SizedBox(width: 4.w),
  389. Container(
  390. clipBehavior: Clip.antiAlias,
  391. decoration: BoxDecoration(),
  392. child:
  393. Assets.images.iconPreviewSwiperEndFirework.image(
  394. width: 40.w,
  395. height: 40.w,
  396. ),
  397. ),
  398. ],
  399. ),
  400. ),
  401. ],
  402. ),
  403. )),
  404. Spacer(
  405. flex: 5,
  406. ),
  407. controller.photoGroup.value.images.isEmpty
  408. ? SizedBox()
  409. : _bottomBarCard(),
  410. ],
  411. );
  412. }
  413. }