目錄
description bug_report

顯示網路上的遠端圖片

目錄

對大多數移動應用來說，圖片顯示是一項基礎功能。 Flutter 提供了 Image 來顯示不同型別的圖片。

使用 Image.network() 建構式函式來處理來自 URL 的圖片。

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

意外之喜：Gif 動畫

Image widget 令人興奮的屬性之一：提供了開箱即用的 gif 動畫支援！

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

使用佔位符淡入影象

預設的 Image.network 建構式函式並沒有提供諸如載入後的圖片淡入等更進一步的功能。要完成這樣的功能，請查閱 佔位符和網路圖片淡入。

互動式範例

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