直接看代碼案例快速入手Flutter
本文介紹Image，CachedNetworkImage庭呜。
??下載GitHub倉庫刻伊，直接體驗
Image比較適合展示靜態(tài)圖片尺铣，也可以展示網(wǎng)絡(luò)圖片，但是效果不好缺谴，CachedNetworkImage是第三方展示圖片庫，更適合展示網(wǎng)絡(luò)圖片耳鸯，設(shè)置下載中的占位圖和下載失敗的占位圖瓣赂。
Image
Image.asset('images/moon.jpg'),
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
width: 200,
),
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
width: 200,
),
CachedNetworkImage
// placeholder and progressIndicatorBuilder cant use together
CachedNetworkImage(
imageUrl: 'https://example.com/my_image.jpg',
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) =>
Image.asset('images/error_image.png')),
CachedNetworkImage(
width: 100,
height: 100,
imageUrl: 'https://example.com/my_image.jpg',
progressIndicatorBuilder: (context, url, downloadProgress) =>
CircularProgressIndicator(value: downloadProgress.progress),
errorWidget: (context, url, error) =>
Image.asset('images/error_image.png'))
