Display images from the internet
Displaying images is fundamental for most mobile apps. Flutter provides the Image
widget to display different types of images.
To work with images from a URL, use the Image.network()
constructor.
Image.network('https://picsum.photos/250?image=9'),
Bonus: animated gifs
#One useful thing about the Image
widget: It supports animated gifs.
Image.network(
'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif',
);
Image fade in with placeholders
#The default Image.network
constructor doesn't handle more advanced functionality, such as fading images in after loading. To accomplish this task, check out Fade in images with a placeholder.
Interactive example
#import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
var title = 'Web Images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: Text(title)),
body: Image.network('https://picsum.photos/250?image=9'),
),
);
}
}
Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-02-12. View source or report an issue.