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