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'),
),
);
}
}