Gifs stopped animating in Flutter 3.27.2 and dart 3.6.1

[Haris2v]

🐛 Bug Report

I tried Flutter SDK 3.27.2 and dart 3.6.1 and found that gifs stopped animations and being displayed as static images on the Flutter web.

Reproduction steps

Set your dart version to 3.6.1 , import cached_network_image: 3.4.1 and run the following code on flutter web.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GifDisplayScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class GifDisplayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GIF Display'),
      ),
      body: Center(
        child: Column(
          children: [
            CachedNetworkImage(
              imageUrl: 'https://i.giphy.com/media/lJ98Us9hMJU5dHANtk/200.gif',
              placeholder: (context, url) => const CircularProgressIndicator(),
              errorWidget: (context, url, error) => const Icon(Icons.error),
            ),
          ],
        ),
      ),
    );
  }
}

Expected behavior

Run the same above code using the 3.24.1 and its working fine. It should work the same way.

Flutter Doctor

[✓] Flutter (Channel stable, 3.27.2, on macOS 14.5 23F79 darwin-arm64 (Rosetta), locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/to/macos-android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.96.1)
[✓] Connected device (4 available)
[✓] Network resources

Platform:

• Web

[DylanCross]

Can confirm. Same here. Gifs play as expected with Image.Network(). They're frozen on the first frame with CachedNetworkImage.

Also only on web. Gifs play fine on mobile.

I also get no errors or notices anywhere. Nothing in the vs code debug console or in the chrome web console. Not sure why it's getting stuck.

It appears unrelated to the caching. It doesn't play on first pull or on the cached pull.

[Haris2v]

@DylanCross You are correct. Image.network plays the gif fine and getting frozen on the first frame with CachedNetworkImage.
Yes there is no logs in IDE console log or chrome console. Please let me know if you need any additional help from my side.

[DylanCross]

@Haris2v Cool. It's helpful to know I've correctly identified the source of the problem.

Apologies as I'm not familiar with the team behind this package. Do you know if or when someone might be able to tackle fixing this bug?

Right now, I rolled back to flutter 3.24.5. Eventually, I'll have to upgrade flutter which will mean quitting using cached_network_image if it isn't fixed by then. The local caching is quite nice though. I've got a media heavy app, but it's mostly recurring assets, so this package saves my users a lot on data.

[Aqua-Ye]

The workaround is to use imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet for now