0

I want to add an Animated GIF asset to a CustomPaint widget, the GIF gets drawn but it doesn't Animate.

I load the animated gif image from assets like this:

Future<void> loadAndAssignImageAssets() async {
    fireImage = await loadImageAssets('assets/images/icegif-1624.gif');
  }

  Future<ui.Image> loadImageAssets(String assetPath) async {
    final data = await rootBundle.load(assetPath);
    final list = Uint8List.view(data.buffer);
    final completer = Completer<ui.Image>();
    ui.decodeImageFromList(list, completer.complete);
    return completer.future;
  }

I pass the GIF to the CustomPaint widget like this:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
          future: loadAndAssignImageAssets(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            }

            return CustomPaint(
              painter: BurnPainter(fireImage),
              child: Container(),
            );
          }),
    );
  }
}

Then this is the method where I draw the GIF inside the BurnPainter class:

  void _drawFire(Size size, Canvas canvas, Rect rectangle) {
    var flameImageWidth = rectangle.width;
    var flameImageHeight = rectangle.height / 5;
    paintImage(
      canvas: canvas,
      rect: Rect.fromLTWH(
        (rectangle.left),
        (rectangle.top),
        flameImageWidth,
        flameImageHeight,
      ),
      image: fireImage,
      filterQuality: FilterQuality.low,
      fit: BoxFit.fill,
    );
  }

The Image gets drawn but It doesn't animate. So how to make the animated GIF gets animated when drawn on the CustomPaint widget?

0 Answers0