從網路顯示圖片

顯示圖片是大多數行動應用程式的基本功能之一。 Flutter 提供了 Image 元件 (Widget)， 可用來顯示不同類型的圖片。

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

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

Image 元件的一個實用特性： 它支援動態 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'),
      ),
    );
  }
}