Flutter Show Load Animated GIF Image from URL Example

Hello Guys, as we all know GIF images are used to display animated graphical representation of a smart clipping object. The object can be animated or a cut of video representation. The GIF images supports browser only and dose not display in normal media viewing program. But Flutter directly comes with support of GIF(Graphics Interchange Format) images with Image.network() widget. We can directly call the GIF image like other images in Image widget. So in this tutorial we would learn about Flutter Show Load Animated GIF Image from URL Example in Android iOS app.

Below is the .gif image we’re using in our tutorial:

Contents in this project Flutter Show Load Animated GIF Image from URL Example:

1. Open your project’s main.dart file and import material.dart package.

import 'package:flutter/material.dart';

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

2. Creating void main runApp() method and here we would call our main MyApp class.

void main() => runApp(MyApp());

1	void main() => runApp(MyApp());

3. Creating our main class MyApp extends StatelessWidget.

class MyApp extends StatelessWidget {



}

class MyApp extends StatelessWidget {

}

4. Creating Widget Build area -> MaterialApp -> Scaffold widget -> Center widget -> Image.network() widget with GIF image URL.

  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Show GIF Image from URL'),
      ),
      body: Center(
          child: Image.network(
        'https://flutter-examples.com/wp-content/uploads/2021/01/happy_mothers_Day.gif',
        width: 300,
        height: 400,
        fit: BoxFit.contain,
      )),
    ));
  }

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Show GIF Image from URL'),

body: Center(

child: Image.network(

'https://flutter-examples.com/wp-content/uploads/2021/01/happy_mothers_Day.gif',

width: 300,

height: 400,

fit: BoxFit.contain,

)),

));

}

5. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Show GIF Image from URL'),
      ),
      body: Center(
          child: Image.network(
        'https://flutter-examples.com/wp-content/uploads/2021/01/happy_mothers_Day.gif',
        width: 300,
        height: 400,
        fit: BoxFit.contain,
      )),
    ));
  }
}