How do i load gif images in flutter
Last updated Mar 14, 2023In 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: |
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
![]() |
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 :
|
|
|
|
6425 Views |