Flutter动态图片展示插件flutter_gif的使用

Flutter动态图片展示插件flutter_gif的使用

在Flutter中，要实现GIF图片的展示，我们可以使用Image组件，但是它无法对GIF进行操作，例如改变播放速度、控制当前帧等。这些功能可以通过flutter_gif插件来实现，并且还可以帮助我们缓存GIF图片，避免每次加载时重新加载每一帧。

截图

简单使用

添加依赖

首先，在pubspec.yaml文件中添加flutter_gif插件的依赖：

dependencies:
  flutter_gif: any # 或者使用最新版本

示例代码

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late FlutterGifController controller;

  @override
  void initState() {
    controller = FlutterGifController(vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GifImage(
              controller: controller,
              image: AssetImage("images/animate.gif"),
            ),
            ElevatedButton(
              onPressed: () {
                controller.repeat(
                  min: 0,
                  max: 53,
                  period: const Duration(milliseconds: 200),
                );
              },
              child: Text('开始播放'),
            ),
            ElevatedButton(
              onPressed: () {
                controller.stop();
              },
              child: Text('暂停播放'),
            ),
            ElevatedButton(
              onPressed: () {
                controller.reset();
              },
              child: Text('重置播放'),
            ),
            Slider(
              value: controller.value,
              min: 0,
              max: 53,
              divisions: 53,
              label: '${controller.value.round()}',
              onChanged: (double value) {
                controller.value = value;
              },
            ),
          ],
        ),
      ),
    );
  }
}

常见操作

以下是一些常用的FlutterGifController操作方法：

// 从第0帧循环到第29帧
controller.repeat(min: 0, max: 29, period: const Duration(milliseconds: 300));

// 跳转到第3帧（索引从0开始）
controller.value = 2;

// 从当前帧过渡到第26帧
controller.animateTo(26);

如果需要预加载GIF图片，可以使用以下方法：

// 预加载图片
fetchGif(AssetImage("images/animate.gif"));

支持插件（可选）

如果你觉得这个插件对你有帮助，可以通过以下方式支持它：


感谢

特别感谢：

• flutter_gifimage

许可证

MIT License

Copyright (c) 2019 Jpeng

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.