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

One useful thing about the Image widget: It supports animated gifs.

Image.network(
    'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif');

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.

• Fade in images with a placeholder

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 2024-06-26. View source or report an issue.