Flutter - Flutter 网路 GIF 图片重复播放

参考资料

• Flutter开发实战系列-控制GIF播放
• Wayback Machine 备份--Flutter开发实战系列-控制GIF播放
• Flutter_Demo/lib/magic/gif_image.dart

说明

会写这篇文章是因为当时正在修 行动装置应用开发 这门课，学习过 Flutter 跟 Dart 语言，刚好教到显示图片的部分，然後因为 Flutter 自带的 Image.network 虽然能显示 GIF 图片，但是只会播放一次，无法做到重复播放，所以在参考完这篇 Flutter开发实战系列-控制GIF播放 後，总算是能够让网路抓到的 GIF 图片达成重复播放的效果，特此撰写本篇文章作为纪录以方便後续复查，虽然後面没有机会再用到，但也算是个不错的经验。

程序部分

在 Flutter 专案的 lib 资料夹内(即 main.dart 所在的资料夹内)，建立 gif_image.dart 档案，将Flutter_Demo/lib/magic/gif_image.dart 的程序码贴在 gif_image.dart 档案里面。

然後在 main.dart 内引入：

main.dart 完整程序码

• repetitionCount 是播放次数通常是设定为大於等於 1 的整数，-1 代表无限次数(无限循环)
• replayDuration 代表 GIF 每次循环的间隔时间(根据 repetitionCount 设定的数字，决定一次循环会播放几次)

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GIF Auto Reload Test'),
        ),
        body: HomeBody(),
      ),
    );
  }
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GIFtest(),
    );
  }
}

class GIFtest extends StatefulWidget {
  @override
  _GIFtestState createState() => _GIFtestState();
}

class _GIFtestState extends State<GIFtest> {
  String picRes1 =
      "https://i.pinimg.com/originals/96/02/e4/9602e410f5cda88aaa033d2658e2386a.gif";
  int repetitionCount = -1;
  Duration duration = Duration(seconds: 1);
  GifNetworkImage gifNetworkImage;

  @override
  void initState() {
    super.initState();
    gifNetworkImage = GifNetworkImage(
      picRes1,
      repetitionCount: repetitionCount,
      replayDuration: duration,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        GifImage.gif(image: gifNetworkImage),
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    gifNetworkImage?.dispose();
  }
}