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

Overview

在Flutter中，为了实现GIF动画，我们可以直接使用Image组件加载GIF文件。然而，如果需要对GIF进行更精细的操作（如改变播放速度、控制播放帧范围等），则可以使用专门的GIF处理插件。这个插件不仅能够帮助我们解决上述问题，还能有效管理GIF缓存，避免每次加载时重新解析每一帧。

Example

下面是一个完整的示例代码，展示了如何异步加载GIF并显示文本占位符，在GIF加载完成后重置控制器并运行到结束。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.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({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final GifController controller1, controller2, controller3;
  int _fps = 30;

  @override
  void initState() {
    controller1 = GifController(vsync: this);
    controller2 = GifController(vsync: this);
    controller3 = GifController(vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          bottom: const TabBar(
            tabs: [
              Tab(
                child: Text('ImageProviders'),
              ),
              Tab(
                child: Text('Manage'),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: [
            ListView(
              clipBehavior: Clip.none,
              children: [
                const Text('AssetImage (original fps, loop)'),
                Gif(
                  autostart: Autostart.loop,
                  placeholder: (context) =>
                      const Center(child: CircularProgressIndicator()),
                  image: const AssetImage('assets/rick.gif'),
                ),
                const Text('NetworkImage (30 fps, once)'),
                Gif(
                  fps: 30,
                  autostart: Autostart.once,
                  placeholder: (context) =>
                      const Center(child: CircularProgressIndicator()),
                  image: const NetworkImage(
                      'https://i.giphy.com/media/Ju7l5y9osyymQ/giphy.webp'),
                ),
                const Text('NetworkImage (20 seconds, once)'),
                Gif(
                  controller: controller2,
                  duration: const Duration(seconds: 20),
                  autostart: Autostart.once,
                  placeholder: (context) =>
                      const Center(child: CircularProgressIndicator()),
                  image: const NetworkImage(
                      'https://i.giphy.com/media/Ju7l5y9osyymQ/giphy.webp'),
                ),
              ],
            ),
            Column(
              children: [
                Gif(
                  controller: controller3,
                  fps: _fps,
                  image: const AssetImage('assets/rick.gif'),
                ),
                AnimatedBuilder(
                  animation: controller3,
                  builder: (BuildContext context, Widget? child) {
                    return Slider(
                      label: 'Timeline',
                      value: controller3.value,
                      onChanged: (v) => setState(() {
                        controller3.value = v;
                      }),
                    );
                  },
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    IconButton(
                      icon: const Icon(Icons.play_arrow),
                      onPressed: () {
                        controller3.repeat();
                      },
                    ),
                    IconButton(
                      icon: const Icon(Icons.stop),
                      onPressed: () {
                        controller3.stop();
                      },
                    ),
                  ],
                ),
                Slider(
                  label: _fps.toString(),
                  value: _fps.toDouble(),
                  min: 1,
                  max: 60,
                  divisions: 4,
                  onChanged: (v) => setState(() {
                    controller3.stop();
                    _fps = v.round();
                  }),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

关键点解释

• GifController：用于控制GIF动画的播放。通过vsync参数确保动画与屏幕刷新率同步。
• Gif：这是一个自定义组件，用于展示GIF动画。它支持多种配置选项，例如image指定要加载的GIF资源，controller关联一个控制器来控制播放行为，placeholder设置加载中的占位符，autostart定义自动播放的行为等。
• AnimatedBuilder：当需要根据动画状态更新UI时非常有用。这里用来创建一个滑块，用户可以通过拖动滑块手动调整当前播放进度。
• Slider：提供了两个功能，一个是作为时间轴让用户体验手动控制播放位置；另一个则是调节帧率(fps)，从而改变GIF播放的速度。

Thanks

感谢peng8350/flutter_gifimage为社区贡献了这样一个优秀的GIF处理库。

License

本项目采用MIT协议授权，详情请参阅LICENSE文件。