How do i load gif images in flutter

Published December 05, 2021

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

5247 Views