How to show remote image in flutter application?

In this tutorial we will learn to show image in flutter. In flutter there is two types of images we can show one is asset image and other one is network image.

To use the images in flutter we have Image class which supports both local and remote images. For asset images we need to define it in pubspec.yaml first. Asset images are images which is stored locally in app directory and Network images are images which is stored in server. We can access Asset images using AssetImage class or Image.asset class.

Display remote image in flutter

Remote image or network image can be displayed easily in flutter application using Image.network method which accept first parameter as URL of image and other parameters for configuration of image.

Let’s understand with an example

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder .

Step 2 : Create a simple widget

Now, Create a simple stateless widget to show the image and it will consist a container and center widget to center the image as below

File : lib/remoteimagedemo.dart

import 'package:flutter/material.dart';

class RemoteImageDemo extends StatelessWidget {
  const RemoteImageDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.white,
      child: Center(
        child: Image.network('https://picsum.photos/200'),
      ),
    );
  }
}

Step 3: Import and use the widget in main

We just created a new widget with name remoteimagedemo, now we are going to use it in our main.dart file as below

import 'package:example_app/remoteimagedemo.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const  RemoteImageDemo(),
    );
  }
}

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.