# Flutter 網路 GIF 圖片重複播放

###### tags: `Flutter`

## 參考資料

* [Flutter开发实战系列-控制GIF播放](https://juejin.cn/post/6881589444194140173)
* [Wayback Machine 備份--Flutter开发实战系列-控制GIF播放](https://web.archive.org/web/20201214124427if_/https://juejin.cn/post/6881589444194140173)
* [Flutter_Demo/lib/magic/gif_image.dart](https://github.com/yuhaocan/Flutter_Demo/blob/master/lib/magic/gif_image.dart)

## 說明

因為 Flutter 自帶的 Image.network 雖然能顯示 GIF 圖片，但是只會播放一次，無法做到重複播放，所以在參考完這篇 [Flutter开发实战系列-控制GIF播放](https://juejin.cn/post/6881589444194140173) 後，總算是能夠讓網路抓到的 GIF 圖片達成重複播放的效果。

## 程式部分

在 Flutter 專案的 lib 資料夾內(即 main.dart 所在資料夾)，建立 gif_image.dart 檔案，將[Flutter_Demo/lib/magic/gif_image.dart](https://github.com/yuhaocan/Flutter_Demo/blob/master/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();
  }
}