https://www.jianshu.com/p/c4463d1b277f
868
Image是一個用於展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
Image 有許多的靜態函數：
- new Image.asset - 用於從資源目錄的顯示圖片。
- new Image.network - 用於從網絡上顯示圖片。
- new Image.file - 用於從文件里顯示圖片。
- new Image.memory - 用於從內存里（Uint8List）顯示圖片。
// 資源圖片 new Image.asset('imgs/logo.jpeg'), //網絡圖片 new Image.network( 'https://flutter.io/images/homepage/header-illustration.png'), // 本地文件圖片 new Image.file(new File("/Users/gs/Downloads/1.jpeg")), // Uint8List圖片 new Image.memory(bytes), //使用ImageProvider加載圖片 new Image(image: new NetworkImage("https://flutter.io/images/homepage/screenshot-2.png")) Image 有以下常用屬性：
- alignment → AlignmentGeometry - 圖像邊界內對齊圖像。
- centerSlice → Rect - 九片圖像的中心切片。
- color → Color - 該顏色與每個圖像像素混合colorBlendMode。
- colorBlendMode → BlendMode - 用於 color 與此圖像結合使用。
- fit → BoxFit - 圖像在布局中分配的空間。
- gaplessPlayback → bool - 當圖像提供者發生變化時，是繼續顯示舊圖像（true）還是暫時不顯示（false）。
- image → ImageProvider - 要顯示的圖像。
- matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。
- repeat → ImageRepeat - 未充分容器時，是否重復圖片。
- height → double - 圖像的高度。
- width → double - 圖像的寬度。
圓角圖片
Image 是不支持圓角和陰影的，目前可以通過使用 CircleAvatar 和 Container 實現。
var img = 'https://b-ssl.duitang.com/uploads/item/' + '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg'; new CircleAvatar( backgroundImage: new NetworkImage(url), radius: 100.0, // --> 半徑越大，圖片越大 ), 
使用 Container 實現，其原理是把圖片放在 decoration 里，而不是 child 里，因為把圖片放在 child 里並設置 borderRadius 時會出現一個圖片穿透的問題，Container 還沒有 overflow 屬性。
new Container( width: 200.0, height: 200.0, margin: const EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white, image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover), shape: BoxShape.circle, ), ), 上面實現的都是一個圓形圖片，下面的實現一個真正的圓角圖片。
new Container( width: 200.0, height: 200.0, margin: const EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white, image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover), shape: BoxShape.rectangle, // <-- 這里需要設置為 rectangle borderRadius: new BorderRadius.all( const Radius.circular(20.0), // <-- rectangle 時，BorderRadius 才有效 ), ), ), 