一個(gè)顯示圖像的組件益愈，其有多個(gè)構(gòu)造函數(shù)。其支持JPEG刨沦、PNG呼巷、GIF、動(dòng)畫GIF捐下、WebP账锹、動(dòng)畫WebP、BMP坷襟、和WBMP格式的圖像奸柬。

1. new Image：用于從ImageProvider獲取圖像。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image(
            image: AssetImage(
              "images/logo.png",
              bundle: null
            ),
            semanticLabel: "這是Image組件",
            excludeFromSemantics: false,
            width: 200.0,
            height: 400.0,
            color: Colors.amber[300],
            colorBlendMode: BlendMode.color,
            fit: BoxFit.fill,
            alignment: Alignment.center,
            repeat: ImageRepeat.noRepeat,
            matchTextDirection: false,
            gaplessPlayback: false,
            filterQuality: FilterQuality.low,
          ),
        )
      ),
    );
  }
}

new Image

2. new Image.asset：用于使用密鑰從AssetBundle獲取圖像婴程。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
            child: Image.asset(
              'images/logo.png',
              semanticLabel: '這是Image.asset',
              excludeFromSemantics: false,
              scale: 0.4,
              width: 600,
              height: 300,
              color: Colors.amber[400],
              colorBlendMode: BlendMode.colorBurn,
              fit: BoxFit.scaleDown,
              alignment: Alignment.center,
              matchTextDirection: false,
              gaplessPlayback: false,
              filterQuality: FilterQuality.low,
            ),
          )
      ),
    );
  }
}

new Image.asset

3. new Image.network：用于從URL獲取圖像廓奕。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
            child: Image.network(
              '網(wǎng)絡(luò)圖片地址',
              semanticLabel: '這是Image.network',
              excludeFromSemantics: false,
              scale: 0.4,
              width: 600,
              height: 300,
              color: Colors.amber[400],
              colorBlendMode: BlendMode.colorBurn,
              fit: BoxFit.scaleDown,
              alignment: Alignment.center,
              matchTextDirection: false,
              gaplessPlayback: false,
              filterQuality: FilterQuality.low,
            ),
          )
      ),
    );
  }
}

4. new Image.file：用于從文件中獲取圖像。

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
          body: Center(
            child: Image.file(
              new File("本地文件路徑"),
              semanticLabel: '這是Image.file',
              excludeFromSemantics: false,
              scale: 0.4,
              width: 600,
              height: 300,
              color: Colors.amber[400],
              colorBlendMode: BlendMode.colorBurn,
              fit: BoxFit.scaleDown,
              alignment: Alignment.center,
              matchTextDirection: false,
              gaplessPlayback: false,
              filterQuality: FilterQuality.low,
            )
          )
      ),
    );
  }
}

//需要開啟SD的讀寫權(quán)限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

new Image.file

5. new Image.memory：用于從Uint8List獲取圖像（暫未搞清楚原理）档叔。

若要自動(dòng)執(zhí)行像素密度感知有用的分辨率桌粉，需使用AssetImage指定圖像，并確保在組件樹中的圖像組件上方存在MaterialApp衙四、WidgetsApp或MediaQuery組件铃肯。
圖像是使用paintImage繪制的，其更詳細(xì)的描述了該類中各個(gè)字段的含義传蹈。

參考：

• Icon：顯示來(lái)自字體的圖像押逼；
• new lnk.image：這是在一個(gè)material application中顯示圖像的首選方法（特別是當(dāng)圖像位于一個(gè)Material中并且上邊還存在InkWell時(shí)）。

Image 屬性

Image屬性

本節(jié)內(nèi)容到此結(jié)束惦界，若在使用過程中遇到問題挑格，歡迎留言交流，我們一起成長(zhǎng)沾歪。

總目錄結(jié)構(gòu)