Display Network Image in Flutter
Last Updated :
22 Apr, 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<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.