Contents

Display images from the internet

Contents

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

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:

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