Load image frame from Gif

readme.md

Load image frame from Gif

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:ui' as ui;

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: GifFramesDisplay(),
        ),
      ),
    );
  }
}

class GifFramesDisplay extends StatefulWidget {
  const GifFramesDisplay({super.key});

  @override
  State<GifFramesDisplay> createState() => _GifFramesDisplayState();
}

class _GifFramesDisplayState extends State<GifFramesDisplay> {
  List<Uint8List> _frames = [];

  @override
  void initState() {
    super.initState();

    loadGif();
  }

  Future<void> loadGif() async {
    final url = Uri.parse(
        'https://raw.githubusercontent.com/Aman-Malhotra/animate_icons/main/demo/animate_icons.gif');
    final ByteData data = await NetworkAssetBundle(url).load(url.path);

    // Using the _extractGifFrames function to extract the frames
    _extractGifFrames(data).then((List<Uint8List> frames) {
      // Set the state to update the UI
      setState(() {
        _frames = frames;
      });
    });
  }

  Future<List<Uint8List>> _extractGifFrames(ByteData data) async {
    // Create a list to store the frames
    final List<Uint8List> frames = <Uint8List>[];

    // Create a codec to decode the gif
    final ui.Codec codec =
        await ui.instantiateImageCodec(data.buffer.asUint8List());

    // Count the number of frames in the gif
    final int frameCount = codec.frameCount;
    print('Total frameCount: $frameCount');

    // Loop through the frames and add them to the list
    for (int i = 0; i < frameCount; i++) {
      // Get the next frame
      final ui.FrameInfo fi = await codec.getNextFrame();

      // Add the frame to the list
      final frame = await loadImage(fi.image);

      // Add the frame to the list if it is not null
      if (frame != null) {
        frames.add(frame);
      }
    }

    return frames;
  }

  Future<Uint8List?> loadImage(ui.Image image) async {
    final ByteData? byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    return byteData?.buffer.asUint8List();
  }

  @override
  Widget build(BuildContext context) {
    return _frames.isEmpty
        ? const CircularProgressIndicator()
        : ListView.builder(
            itemCount: _frames.length,
            itemBuilder: (BuildContext context, int index) {
              return Image.memory(_frames[index]);
            },
          );
  }
}

Your code no longer works. I couldn't find what the error was. Can you help?