Image.network
- Flutter course
- Beginner
- Lesson 77/99
- 4 min
Display remote images with Image.network.
What is Image.network?
Image.network is a constructor that loads a remote image from a URL. It requires internet access; the image is downloaded and cached. It works without bundling files into the app, taking just the URL string as a parameter.
Image.network('https://example.com/photo.png')Loading and error states
Image.network accepts loadingBuilder and errorBuilder parameters. With loadingBuilder you can show a loading indicator while the image downloads, and with errorBuilder a fallback when it fails. This improves UX on slow connections.
Image.network(
'https://example.com/p.png',
loadingBuilder: (context, child, progress) {
return CircularProgressIndicator();
},
)Practice Show a remote image with Image.network
Return a widget that shows https://picsum.photos/200 using Image.network.
Starter code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// buraya Image.network ekle
child: null,
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void main() {
print('NetworkImage: https://picsum.photos/200');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.network('https://picsum.photos/200'),
),
),
);
}
}Expected output
NetworkImage: https://picsum.photos/200
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is Image.network preferred?
- When the image is in the app bundle
- When you have the image as a byte array
- When the image is on the device file system
- When the image is at an internet address Correct answer
Explanation: Image.network is used to download an image from a URL; it is not suitable for asset or file paths.
2 Give a URL to the Image.network constructor
Image.network('____')Image.network('https://example.com/p.png')Explanation: Image.network expects a URL string; an asset path or file path will not work.
3 Image.network parts
| Term | Meaning |
|---|---|
Image.network |
Loads an image from a URL |
loadingBuilder |
Appearance during download |
errorBuilder |
Appearance on error |
URL dizesi |
The single required parameter |