Display Network Image in Flutter

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<double>? 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

Property	Description
height	This property takes in an integer value as the object. It decides the height of the image vertically.
width	This property also takes in an Integer value as the object to determine the width in pixels to be allocated to the image.

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<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
      // Design of the application
      appBar: AppBar(
        title:Text("GeeksforGeeks"),
        backgroundColor:Colors.green
      ),
      body: // Code Here
    );
  }
}

- 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:<Widget>[
    // 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<MyHomePage> {
  @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.

Display Network Image in Flutter

Constructor of Image.network:

Key Properties of Image.network

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Step 2: Working with main.dart

Step 3: Develop UI

Complete Source Code

Explore