Display images from the internet

Displaying images is fundamental for most mobile apps. Flutter provides theImage Widget todisplay different types of images.

In order to work with images from a URL, use theImage.networkconstructor.

Image.network(
  'https://picsum.photos/250?image=9',
)

Bonus: Animated Gifs

One amazing thing about the Image Widget: It also supports animated gifs outof the box!

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 does not handle more advancedfunctionality, such as fading images in after loading or caching imagesto the device after they’re downloaded. To achieve these tasks, please seethe following recipes:

• Fade in images with a placeholder
• Working with cached images

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