当前位置: 首页 > 文档资料 > Flutter 英文文档 >

Display images from the internet

优质
小牛编辑
135浏览
2023-12-01

Displaying images is fundamental for most mobile apps. Flutter provides the Image Widget to display different types of images.

In order to work with images from a URL, use the Image.network constructor.

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

Bonus: Animated Gifs

One amazing thing about the Image Widget: It also supports animated gifs out of 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 advanced functionality, such as fading images in after loading or caching images to the device after they’re downloaded. To achieve these tasks, please see the following recipes:

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

Network Image Demo