Flutter动画图片展示插件gify的使用
Flutter 动画图片展示插件 gify 的使用
gify
使用视频和图片制作 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;
}
贡献
- 拉取请求总是受欢迎的!
- 请向 https://github.com/swimmingkiim/gify 发送拉取请求。
许可证
完整示例代码
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循环播放
),
),
);
}
}
在这个例子中,我们做了以下几件事:
- 在
pubspec.yaml
中添加了flutter_giffy
依赖。 - 创建了一个简单的Flutter应用,其中包含一个主屏幕
MyHomePage
。 - 在
MyHomePage
中,我们使用GiffyImage.asset
来展示一个GIF动画。这里我们假设GIF文件已经放在了assets
文件夹中,并且已经在pubspec.yaml
中声明了这个资源。 - 我们创建了一个
AnimationController
来控制GIF的动画,并设置了动画的持续时间,然后调用..repeat()
让GIF循环播放。
请确保你的GIF文件已经正确放置在assets
文件夹中,并且在pubspec.yaml
中声明,如下所示:
flutter:
assets:
- assets/animation.gif
这样,你就可以在你的Flutter应用中展示GIF动画了。如果你确实想使用gify
包(尽管它可能不是最新的或最常用的选择),你应该查找该包的文档并按照其说明进行操作,但通常flutter_giffy
是更合适的选择。