How do i load gif images in flutter

Last updated Mar 14, 2023

In this flutter example tutorial we are going to learn load gif images in flutter application.Gif images are used to display animated graphics with multiple objects. Normally animate images will display in web browsers. in this we will show you load gif images in flutter application.
We are loading the GIF images

Load from Network URL
Load from local Assets

Load Gif Image from Online URL

To load images from network we will use Image.network() widget, with the same widget we will load the gif images also

Image.network(
  'https://www.funimada.com/assets/images/cards/big/christmas-38.gif',
  width: 200,
  height: 200,
  fit: BoxFit.contain,
)

Load Gif Image from Assets folder

Add your gif image in assets folder and declare images in pubspec.yaml file

assets:
- logo.png
- cristmas.gif

Now load image from assets folder by using Image.asset() widget

Image.asset("assets/cristmas.gif",width: 200,
  height: 200,)

This will gives the output like below

Load Gif Images inside flutter application

Complete example code for load gif images in flutter application

import 'package:flutter/material.dart';

void main() async{
  runApp(LoadGifImages());
}
class LoadGifImages extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Load Gif Images"),),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("Load From URL",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
              SizedBox(height: 10,),
              Image.network(
                'https://www.funimada.com/assets/images/cards/big/christmas-38.gif',
                width: 200,
                height: 200,
                fit: BoxFit.contain,
              ),
              SizedBox(height: 30,),
              Text("Load From URL",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
              SizedBox(height: 10,),
              Image.asset("assets/cristmas.gif",width: 200,
                height: 200,)
            ],
          ),
        ),
      ),
    );
  }

}

Article Contributed By :

5935 Views

Projects By category