Flutter图片大小调整插件gif_resize的使用

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

Flutter图片大小调整插件gif_resize的使用

gif_resize 是一个用于调整GIF文件大小的新Flutter插件。该插件使用Go语言编写。

支持平台

  • iOS: 支持从 iOS 12 开始。
  • Android: 支持从 Android API 26 (Android 8.0 Oreo) 开始。

环境要求

  • SDK: >=2.17.0 <3.0.0
  • Flutter: >=3.0.0

完整示例代码

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

import 'package:flutter/services.dart';
import 'package:gif_resize/gif_resize.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _gifResizePlugin = GifResize();
  Uint8List? dataImage;

  @override
  void initState() {
    super.initState();
  }

  Future<void> resize() async {
    if (!mounted) return;
    // 加载本地GIF文件
    ByteData byteData = await rootBundle.load('assets/test.gif');
    Uint8List bytes = byteData.buffer.asUint8List();

    // 初始化插件，并设置目标高度和宽度
    await _gifResizePlugin.init(h: 200, w: 200);
    print(await _gifResizePlugin.getHeight()); // 输出当前高度
    print(await _gifResizePlugin.getWidth()); // 输出当前宽度

    // 调整高度和宽度
    await _gifResizePlugin.setHeight(h: 64);
    await _gifResizePlugin.setWidth(w: 128);

    print(await _gifResizePlugin.getHeight()); // 输出调整后的高度
    print(await _gifResizePlugin.getWidth()); // 输出调整后的宽度

    // 处理并获取调整后的GIF数据
    Uint8List resized = await _gifResizePlugin.process(bytes);
    setState(() {
      dataImage = resized;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(children: [
            // 显示原始GIF图像
            Image.asset('assets/test.gif'),
            const SizedBox(
              height: 32,
            ),
            // 显示调整后的GIF图像
            dataImage == null
                ? const SizedBox.shrink()
                : Image.memory(dataImage!),
          ]),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await resize();
          },
          backgroundColor: Colors.green,
          child: const Icon(Icons.navigation),
        ),
      ),
    );
  }
}

使用说明

  1. 在你的 pubspec.yaml 文件中添加 gif_resize 依赖：

    dependencies:
  flutter:
    sdk: flutter
  gif_resize: ^版本号

  2. 将GIF文件添加到 assets 目录中，并在 pubspec.yaml 中声明：

    assets:
  - assets/test.gif

更多关于Flutter图片大小调整插件gif_resize的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片大小调整插件gif_resize的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用gif_resize插件来调整GIF图片大小的代码示例。gif_resize插件允许你调整GIF图片的尺寸而不影响其动画效果。

首先，确保你已经在pubspec.yaml文件中添加了gif_resize依赖：

dependencies:
  flutter:
    sdk: flutter
  gif_resize: ^0.x.x  # 请替换为最新版本号

然后，运行以下命令以获取依赖：

flutter pub get

接下来是一个完整的Flutter应用示例，展示了如何使用gif_resize插件来调整GIF图片的大小：

import 'package:flutter/material.dart';
import 'package:gif_resize/gif_resize.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GifResizeExample(),
    );
  }
}

class GifResizeExample extends StatefulWidget {
  @override
  _GifResizeExampleState createState() => _GifResizeExampleState();
}

class _GifResizeExampleState extends State<GifResizeExample> {
  Uint8List? resizedGifData;

  @override
  void initState() {
    super.initState();
    _loadAndResizeGif();
  }

  Future<void> _loadAndResizeGif() async {
    // 加载本地GIF资源（假设你有一个名为'sample.gif'的文件在assets文件夹中）
    ByteData? byteData = await rootBundle.load('assets/sample.gif');
    if (byteData != null) {
      Uint8List gifData = byteData!.buffer.asUint8List();

      // 调整GIF大小
      Uint8List resizedGif = await GifResizer.resizeGif(
        gifData,
        width: 200, // 目标宽度
        height: 200, // 目标高度
      );

      // 更新状态
      setState(() {
        resizedGifData = resizedGif;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GIF Resize Example'),
      ),
      body: Center(
        child: resizedGifData == null
            ? CircularProgressIndicator()
            : Image.memory(resizedGifData!, format: ui.decodeImageFromList(resizedGifData!)!.format),
      ),
    );
  }
}

在这个示例中，我们做了以下几步：

  1. 在pubspec.yaml文件中添加了gif_resize依赖。
  2. 在assets文件夹中放置了一个名为sample.gif的GIF文件，并在pubspec.yaml中声明了这个资源。
  3. 在GifResizeExample组件中，通过rootBundle.load方法加载GIF文件，并将其转换为Uint8List格式。
  4. 使用GifResizer.resizeGif方法调整GIF图片的大小。
  5. 将调整大小后的GIF数据存储在resizedGifData中，并在UI中显示。

请注意，你需要将sample.gif文件放在assets文件夹中，并在pubspec.yaml中声明它，例如：

flutter:
  assets:
    - assets/sample.gif

这样，你就可以在Flutter应用中调整GIF图片的大小并显示调整后的GIF了。

回到顶部