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://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);
Placeholders and caching
The default Image.network
constructor doesn’t handle more advanced
functionality, such as fading images in after loading, or caching images
to the device after they’re downloaded. To accomplish these tasks, see
the following recipes:
Complete example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@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',
),
),
);
}
}