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.
dart
Image.network('https://picsum.photos/250?image=9'),
Bonus: animated gifs
#One useful thing about the Image
widget: It supports animated gifs.
dart
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'),
),
);
}
}
Was this page's content helpful?
Thank you for your feedback!
Provide details Thank you for your feedback! Please let us know what we can do to improve.
Provide details 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.