Display Network Image in Flutter (original) (raw)

Last Updated : 15 Jul, 2025

Flutter has an Image widget to display different types of images. To display images from the internet, the **Image.network()function is used.

**Syntax:

Image.network ('source_URL')

Constructor of Image.network:

Image Image.network( String src, { Key? key, double scale = 1.0, Widget Function(BuildContext, Widget, int?, bool)? frameBuilder, Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder,
Widget Function(BuildContext, Object, StackTrace?)? errorBuilder, String? semanticLabel,
bool excludeFromSemantics = false, double? width, double? height, Color? color, Animation? opacity, BlendMode? colorBlendMode, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, Rect? centerSlice, bool matchTextDirection = false, bool gaplessPlayback = false, FilterQuality filterQuality = FilterQuality.medium, bool isAntiAlias = false, Map<String, String>? headers, int? cacheWidth, int? cacheHeight, WebHtmlElementStrategy webHtmlElementStrategy = WebHtmlElementStrategy.never, })

**Key Properties of Image.network

Follow the steps below to display the images from the internet in your Flutter application:

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Working with main.dart

Add the boilerplate code below in main.dart to initialize the Firebase in the main function and create a basic structure with an MaterialApp.

Dart `

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Network Image', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), debugShowCheckedModeBanner: false, ); } }

// setup a stateful widget class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold(

  // Design of the application
  appBar: AppBar(
    title:Text("GeeksforGeeks"),
    backgroundColor:Colors.green
  ),
  body: // Code Here
);

} }

`

**Step 3: Develop UI

- **Image.network(): Used to Display Network Images.

Dart `

Image.network("IMAGE_URL"),

`

- **ListView(): Used to create a scrollable list, in the specified direction (for ex: Horizontal, Vertical).

Dart `

ListView( children:[ // Item1 // Item2 // Item3 ] )

`

Now, use the below code in the **main.dart file and change the parameter of Image.network function as per you need.

**Complete Source Code

**main.dart:

main.dart `

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Network Image', theme: ThemeData(primarySwatch: Colors.blue), home: MyHomePage(), debugShowCheckedModeBanner: false, ); } }

// Setup a stateful widget class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); }

class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold(

  // Design of the application
  appBar: AppBar(
    title: Text("GeeksforGeeks"),
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
  ),
  body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),

          // Image.network(src)
          child: Image.network(
            "https://images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.network(
            "https://images.pexels.com/photos/2899097/pexels-photo-2899097.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.network(
            "https://images.pexels.com/photos/2820884/pexels-photo-2820884.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
          ),
        ),
      ],
    ),
  ),
);

} }

`

**Output:

**Explanation of the above Program:

• Here we used the **ListView to display images on the screen.
• In **Image.network(src), we have given the network image path (src is image path).
• Finally, we used the width and height to resize the image.