Flutter动画图片展示插件gify的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter 动画图片展示插件 gify 的使用

gify

使用视频和图片制作 GIF

示例 ( 在线演示 )

创建 GIF 示例

特性

  • getFramesBytes:从视频中获取帧图像作为列表。
  • createGifFromVideo:从视频中创建 GIF 作为 Uint8List。
  • createGifFromImages:从图片中创建 GIF 作为 Uint8List。

开始使用

前提条件
  • iOS
    • 最低目标版本:12.1
  • Android
    • 最低 SDK 版本:24
  • 运行示例
    • 示例使用了 image_picker,因此你需要修改你的 Info.plist 文件(文档)。
安装
flutter pub add gify

使用方法

Future<List<Uint8List>?> testFrames() async {
  final XFile? videoFile = await ImagePicker().pickVideo(source: ImageSource.gallery);
  if (videoFile != null) {
    final result = await _gifyPlugin.getFramesBytes(videoFile, fps: 1);
    return result;
  }
  return null;
}

Future<Uint8List?> testVideoToGif() async {
  final XFile? videoFile = await ImagePicker().pickVideo(source: ImageSource.gallery);
  if (videoFile != null) {
    final result = await _gifyPlugin.createGifFromVideo(videoFile, fps: 1, width: 320);
    return result;
  }
  return null;
}

Future<Uint8List?> testImagesToGif() async {
  final List<XFile> imageFiles = await ImagePicker().pickMultiImage();
  final result = await _gifyPlugin.createGifFromImages(imageFiles,
      fps: 1,
      width: 300,
      height: 480,
      textMessages: [
        const GifyTextMessage(
          text: 'test111',
          fontColor: Color.fromRGBO(247, 24, 7, 1),
          fontSize: 30,
          x: 10.0,
          y: 10.0,
        ),
        const GifyTextMessage(
          text: 'test222',
          fontColor: Color.fromRGBO(7, 67, 247, 1),
          fontSize: 20,
          x: 30.0,
          y: 30.0,
        ),
      ]);
  return result;
}

贡献

许可证


完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';

import 'package:gify/gify.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _gifyPlugin = Gify();
  Uint8List? bytes;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  Future<List<Uint8List>?> testFrames() async {
    final XFile? videoFile = await ImagePicker().pickVideo(source: ImageSource.gallery);
    if (videoFile != null) {
      final result = await _gifyPlugin.getFramesBytes(videoFile, fps: 1);
      // 解除注释以下代码以查看结果
      setState(() {
        if (result != null) {
          bytes = result[0];
        }
      });
      return result;
    }
    return null;
  }

  Future<Uint8List?> testVideoToGif() async {
    final XFile? videoFile = await ImagePicker().pickVideo(source: ImageSource.gallery);
    if (videoFile != null) {
      final result = await _gifyPlugin.createGifFromVideo(videoFile, fps: 1, height: 320, textMessages: [
        const GifyTextMessage(
          text: 'test111',
          fontColor: Color.fromRGBO(247, 24, 7, 1),
          fontSize: 30,
          x: 10.0,
          y: 310.0,
        ),
        const GifyTextMessage(
          text: 'test222',
          fontColor: Color.fromRGBO(7, 67, 247, 1),
          fontSize: 20,
          x: 30.0,
          y: 30.0,
        ),
      ]);
      // 解除注释以下代码以查看结果
      setState(() {
        if (result != null) {
          bytes = result;
        }
      });
      return result;
    }
    return null;
  }

  Future<Uint8List?> testImagesToGif() async {
    final List<XFile> imageFiles = await ImagePicker().pickMultiImage();
    final result = await _gifyPlugin.createGifFromImages(imageFiles,
        fps: 1,
        width: 300,
        height: 480,
        textMessages: [
          const GifyTextMessage(
            text: 'test111',
            fontColor: Color.fromRGBO(247, 24, 7, 1),
            fontSize: 30,
            x: 10.0,
            y: 10.0,
          ),
          const GifyTextMessage(
            text: 'test222',
            fontColor: Color.fromRGBO(7, 67, 247, 1),
            fontSize: 20,
            x: 30.0,
            y: 30.0,
          ),
        ]);
    // 解除注释以下代码以查看结果
    setState(() {
      if (result != null) {
        bytes = result;
      }
    });
    return result;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          children: [
            Center(
              child: InkWell(
                onTap: () => testFrames(),
                child: const Text('测试从视频中获取帧图像'),
              ),
            ),
            Center(
              child: InkWell(
                onTap: () => testVideoToGif(),
                child: const Text('测试从视频中创建 GIF'),
              ),
            ),
            Center(
              child: InkWell(
                onTap: () => testImagesToGif(),
                child: const Text('测试从图片中创建 GIF'),
              ),
            ),
            if (bytes != null) Image.memory(bytes!)
          ],
        ),
      ),
    );
  }
}

更多关于Flutter动画图片展示插件gify的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画图片展示插件gify的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用gify插件来展示动画图片的示例代码。不过需要注意的是,实际上Flutter社区更常用的是flutter_giffy或官方的image包来处理GIF动画。由于gify包在Flutter社区中不是非常流行,且可能不是最新的选择,我将基于flutter_giffy包来展示代码,因为它专门用于GIF动画的展示,并且使用简单。

首先,确保在pubspec.yaml文件中添加flutter_giffy依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_giffy: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以使用GiffyImage组件来展示GIF动画。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:flutter_giffy/flutter_giffy.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GIF Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GIF Animation Example'),
      ),
      body: Center(
        child: GiffyImage.asset(
          image: 'assets/animation.gif', // 替换为你的GIF文件路径
          animationController: AnimationController(
            vsync: VSyncNotifier(),
            duration: const Duration(seconds: 5), // 设置GIF循环一次的时间
          )..repeat(), // 让GIF循环播放
        ),
      ),
    );
  }
}

在这个例子中,我们做了以下几件事:

  1. pubspec.yaml中添加了flutter_giffy依赖。
  2. 创建了一个简单的Flutter应用,其中包含一个主屏幕MyHomePage
  3. MyHomePage中,我们使用GiffyImage.asset来展示一个GIF动画。这里我们假设GIF文件已经放在了assets文件夹中,并且已经在pubspec.yaml中声明了这个资源。
  4. 我们创建了一个AnimationController来控制GIF的动画,并设置了动画的持续时间,然后调用..repeat()让GIF循环播放。

请确保你的GIF文件已经正确放置在assets文件夹中,并且在pubspec.yaml中声明,如下所示:

flutter:
  assets:
    - assets/animation.gif

这样,你就可以在你的Flutter应用中展示GIF动画了。如果你确实想使用gify包(尽管它可能不是最新的或最常用的选择),你应该查找该包的文档并按照其说明进行操作,但通常flutter_giffy是更合适的选择。

回到顶部