Flutter动态照片制作插件live_photo_maker的使用

Flutter动态照片制作插件live_photo_maker的使用

live_photo_maker 是一个用于创建动态照片（Live Photo）的Flutter插件，主要用于锁屏壁纸。该插件目前仅支持iOS平台，Android平台暂不支持。

支持平台

插件功能

• 创建动态照片：通过提供封面图片、内容图片或视频以及音频文件，生成动态照片。
• 适配iOS平台：目前仅支持iOS设备，可以在iOS设备上设置为锁屏壁纸。

使用示例

以下是一个完整的示例代码，展示了如何使用 live_photo_maker 插件来创建动态照片。该示例包括选择封面图片、内容图片或视频、音频文件，并最终生成动态照片。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:live_photo_maker/live_photo_maker.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const LivePhotoPage(),
      builder: EasyLoading.init(), // 初始化加载动画
    );
  }
}

class LivePhotoPage extends StatefulWidget {
  const LivePhotoPage({super.key});

  [@override](/user/override)
  State<LivePhotoPage> createState() => _LivePhotoPageState();
}

class _LivePhotoPageState extends State<LivePhotoPage> {
  File? coverImage; // 封面图片
  File? contentImage; // 内容图片
  File? contentVoice; // 音频文件
  late int movWidth; // 视频宽度
  late int movHeight; // 视频高度

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Live Photo Maker"), // 标题
        leading: const SizedBox.shrink(), // 移除返回按钮
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                // 封面图片选择区域
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      pickPhoto(0); // 选择封面图片
                    },
                    behavior: HitTestBehavior.opaque,
                    child: coverImage != null
                        ? Image.file(coverImage!) // 显示已选择的封面图片
                        : Container(
                            color: Colors.green, // 未选择时显示绿色背景
                            height: double.infinity,
                            child: const Center(
                              child: Text(
                                'Cover Image', // 提示文本
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                  ),
                ),
                // 内容图片或视频选择区域
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      pickPhoto(1); // 选择内容图片或视频
                    },
                    behavior: HitTestBehavior.opaque,
                    child: contentImage != null
                        ? Image.file(contentImage!) // 显示已选择的内容图片
                        : contentVoice != null
                            ? const Center(
                                child: Icon(Icons.play_circle, size: 88), // 显示已选择的视频图标
                              )
                            : Container(
                                color: Colors.cyan, // 未选择时显示青色背景
                                height: double.infinity,
                                child: const Center(
                                  child: Text(
                                    'Content', // 提示文本
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                  ),
                ),
              ],
            ),
          ),
          // 创建按钮
          Expanded(
            child: Builder(builder: (context) {
              return Center(
                child: TextButton(
                  onPressed: () async {
                    await create(context); // 点击按钮后创建动态照片
                  },
                  child: const Text('create'), // 按钮文本
                ),
              );
            }),
          )
        ],
      ),
    );
  }

  // 选择图片或视频
  Future<void> pickPhoto(int index) async {
    final List<AssetEntity>? result = await AssetPicker.pickAssets(context,
        pickerConfig: AssetPickerConfig(
          maxAssets: 1, // 最多选择1个文件
          requestType: index == 0 ? RequestType.image : RequestType.common, // 选择封面图片或内容图片/视频
        ));
    if (result == null) {
      return;
    }

    // 获取选择的文件的宽高
    movWidth = result.first.width;
    movHeight = result.first.height;

    // 获取选择的文件
    File? pickFile = await result.first.originFile;
    if (!mounted || pickFile == null) return;

    // 判断是否为视频文件
    if (fileIsVideo(pickFile.path)) {
      contentImage = null; // 清空内容图片
      contentVoice = pickFile; // 设置为视频文件
      setState(() {});
      return;
    }

    // 根据索引设置封面图片或内容图片
    if (index == 0) {
      coverImage = pickFile;
    } else {
      contentImage = pickFile;
      contentVoice = null;
    }
    setState(() {});
  }

  // 创建动态照片
  Future<void> create(BuildContext context) async {
    // 检查是否选择了封面图片和内容图片/视频
    if (coverImage == null || (contentImage == null && contentVoice == null)) {
      return;
    }

    // 显示加载动画
    EasyLoading.show(status: 'waiting..', dismissOnTap: false);
    
    // 调用 live_photo_maker 插件创建动态照片
    bool success = await LivePhotoMaker.create(
        coverImage: coverImage!.path, // 封面图片路径
        imagePath: contentImage?.path, // 内容图片路径
        voicePath: contentVoice?.path, // 音频文件路径
        width: movWidth, // 宽度
        height: movHeight); // 高度

    // 隐藏加载动画
    EasyLoading.dismiss();

    // 显示操作结果
    if (context.mounted) {
      final s = Scaffold.of(context).showBottomSheet((context) {
        return Container(
          width: double.infinity,
          color: Colors.black87,
          height: 50,
          padding: const EdgeInsets.symmetric(vertical: 15),
          alignment: Alignment.center,
          child: Text(
            success ? 'success' : 'failure', // 成功或失败提示
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
        );
      });

      // 1秒后关闭底部弹窗
      Future.delayed(const Duration(seconds: 1), () {
        s.close();
      });
    }
  }

  // 判断文件是否为视频
  bool fileIsVideo(String filePath) {
    final file = File(filePath);
    final extension = file.path.split('.').last.toLowerCase(); // 获取文件扩展名

    // 判断是否为图片格式
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].contains(extension)) {
      return false;
    }
    // 判断是否为视频格式
    else if (['mp4', 'mkv', 'avi', 'mov', 'flv'].contains(extension)) {
      return true;
    } else {
      return false;
    }
  }
}