✨ Explicit Live Photos indicator for assets (#629)

Author: AlexV525

CHANGELOG.md

@@ -9,6 +9,10 @@ that can be found in the LICENSE file. -->
 
 ## Unreleased
 
+### New features
+
+- Add explicit Live Photos indicator for assets.
+
 ### Fixes
 
 - Fix bottom actions bar display conditions.

README-ZH.md

@@ -20,7 +20,7 @@ Language: [English](README.md) | 中文
 
 基于 **微信 UI** 的 Flutter **图片选择器（同时支持视频和音频）**。
 
-当前的界面设计基于的微信版本：**8.3.x**
+当前的界面设计基于的微信版本：**8.0.51**
 界面更新将在微信版本更新后随时进行跟进。
 
 如果你需要拍照及录制视频，请先查看示例的详细用法，

README.md

@@ -21,7 +21,7 @@ Language: English | [中文](README-ZH.md)
 An **image picker (also with videos and audios)**
 for Flutter projects based on the WeChat's UI.
 
-Current WeChat version that UI based on: **8.3.x**
+Current WeChat version that UI based on: **8.0.51**
 UI designs will be updated following the WeChat update in anytime.
 
 To take a photo or a video for assets,

assets/icon/indicator-live-photos.png

@@ -405,8 +405,8 @@ abstract class AssetPickerBuilderDelegate<Asset, Path> {
   /// GIF image type indicator.
   /// GIF 类型图片指示
   Widget gifIndicator(BuildContext context, Asset asset) {
-    return Positioned.fill(
-      top: null,
+    return Align(
+      alignment: Alignment.bottomCenter,
       child: Container(
         alignment: AlignmentDirectional.centerEnd,
         padding: const EdgeInsets.all(6),
@@ -442,6 +442,34 @@ abstract class AssetPickerBuilderDelegate<Asset, Path> {
     );
   }
 
+  Widget buildLivePhotoIndicator(BuildContext context, Asset asset) {
+    return Align(
+      alignment: AlignmentDirectional.bottomCenter,
+      child: Container(
+        width: double.maxFinite,
+        height: 26,
+        alignment: AlignmentDirectional.bottomStart,
+        padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 2),
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: AlignmentDirectional.bottomCenter,
+            end: AlignmentDirectional.topCenter,
+            colors: <Color>[
+              theme.canvasColor.withAlpha(80),
+              Colors.transparent,
+            ],
+          ),
+        ),
+        child: Image.asset(
+          'assets/icon/indicator-live-photos.png',
+          package: packageName,
+          gaplessPlayback: true,
+          color: Colors.white,
+        ),
+      ),
+    );
+  }
+
   /// Indicator when the asset cannot be selected.
   /// 当资源无法被选中时的遮罩
   Widget itemBannedIndicator(BuildContext context, Asset asset) {
@@ -1700,19 +1728,19 @@ class DefaultAssetPickerBuilderDelegate
           type = SpecialImageType.heic;
         }
         return Stack(
+          fit: StackFit.expand,
           children: <Widget>[
-            Positioned.fill(
-              child: RepaintBoundary(
-                child: AssetEntityGridItemBuilder(
-                  image: imageProvider,
-                  failedItemBuilder: failedItemBuilder,
-                ),
+            RepaintBoundary(
+              child: AssetEntityGridItemBuilder(
+                image: imageProvider,
+                failedItemBuilder: failedItemBuilder,
               ),
             ),
             if (type == SpecialImageType.gif) // 如果为GIF则显示标识
               gifIndicator(context, asset),
             if (asset.type == AssetType.video) // 如果为视频则显示标识
               videoIndicator(context, asset),
+            if (asset.isLivePhoto) buildLivePhotoIndicator(context, asset),
           ],
         );
       },
@@ -2260,10 +2288,8 @@ class DefaultAssetPickerBuilderDelegate
   /// 将指示器的图标和文字设置为 [Colors.white]。
   @override
   Widget videoIndicator(BuildContext context, AssetEntity asset) {
-    return PositionedDirectional(
-      start: 0,
-      end: 0,
-      bottom: 0,
+    return Align(
+      alignment: Alignment.bottomCenter,
       child: Container(
         width: double.maxFinite,
         height: 26,

lib/src/delegates/asset_picker_builder_delegate.dart

@@ -60,6 +60,10 @@ class AssetPickerTextDelegate {
   /// GIF指示的字段
   String get gifIndicator => 'GIF';
 
+  /// Live-Photo image indicator string.
+  /// 实况图片指示的字段
+  String get livePhotoIndicator => '实况';
+
   /// Load failed string for item.
   /// 资源加载失败时的字段
   String get loadFailed => '加载失败';
@@ -182,6 +186,9 @@ class EnglishAssetPickerTextDelegate extends AssetPickerTextDelegate {
   @override
   String get gifIndicator => 'GIF';
 
+  @override
+  String get livePhotoIndicator => 'LIVE';
+
   @override
   String get loadFailed => 'Load failed';
 

lib/src/delegates/asset_picker_text_delegate.dart

@@ -8,6 +8,7 @@ import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:photo_manager/photo_manager.dart';
+import 'package:wechat_picker_library/wechat_picker_library.dart';
 
 import '../constants/config.dart';
 import '../delegates/asset_picker_builder_delegate.dart';
@@ -144,9 +145,7 @@ class AssetPickerState<Asset, Path> extends State<AssetPicker<Asset, Path>>
   Future<void> _onAssetsUpdated(MethodCall call) {
     return widget.builder.onAssetsChanged(call, (VoidCallback fn) {
       fn();
-      if (mounted) {
-        setState(() {});
-      }
+      safeSetState(() {});
     });
   }
 

lib/src/widget/asset_picker.dart

@@ -114,9 +114,7 @@ class _AudioPageBuilderState extends State<AudioPageBuilder> {
       );
     } finally {
       isLoaded = true;
-      if (mounted) {
-        setState(() {});
-      }
+      safeSetState(() {});
     }
   }
 
@@ -125,9 +123,7 @@ class _AudioPageBuilderState extends State<AudioPageBuilder> {
   void audioPlayerListener() {
     if (isControllerPlaying != isPlaying) {
       isPlaying = isControllerPlaying;
-      if (mounted) {
-        setState(() {});
-      }
+      safeSetState(() {});
     }
 
     /// Add the current position into the stream.