【Flutter 程式設計入門實戰 30 天】Day 11：Image 圖片元件

【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

哈囉～大家好，我是 KT ，今天實戰第十一天，KT 將為大家來介紹，如何使用 Image 元件來顯示手機端和網路上的圖片。

Image 圖片元件

Image 圖片元件，可用來顯示手機內和網路上圖片的元件。

Image 圖片元件，常用的方法

• Image.asset ，載入此APP 指定資料夾內的資源圖片
• Image.file ，載入手機指定路徑位置圖片
• Image.network ，載入網路指定網址圖片
• Image.memory ，載入 Uint8List 資源圖片

Image 圖片元件，常用的屬性

• width，設定圖片寬度
• height，設定圖片高度
• fit，圖片填充方式

fit 種類

• BoxFit.fill，填滿容器（可能造成圖片會被壓扁變形）
• BoxFit.contain，顯示原圖片大小
• BoxFit.cover，延伸填滿 （圖片可能會被過度放大，部分被裁減掉）
• BoxFit.fitWidth，填滿寬度（圖片可能被部分裁減掉）
• BoxFit.fitHeight，填滿高度（圖片可能被部分裁減掉）
• BoxFit.none，不做任何延伸或縮小變化

起手式範例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('HKT線上教室'),
          ),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
                    //↓↓↓更改此處程式碼↓↓↓
      child: Center(child: Image.asset('')),
    );
  }
}

範例：載入此APP 指定資料夾內的資源圖片

Image.asset('assets/images/logo.png')

詳細步驟

下載下方圖片，另存檔案，命名為「logo.png」。

在專案根目錄下，新增一個 「assets」 目錄，在該目錄下在新增一個 「images」 資料夾，將「logo.png」放到此目錄下：

開啟 「pubspec.yaml」，註冊「logo.png」圖片 。

 assets:
    - assets/images/logo.png

實際修改範例：

當 「pubspec.yaml」有變化時，記得要按下重新獲取相依檔，否則無法正確載入圖片。

完整程式碼

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('HKT線上教室'),
          ),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Center(child:Image.asset('assets/images/logo.png')),
    );
  }
}

執行畫面

範例：載入網路指定網址圖片

Image.network('https://i.imgur.com/ZX0PtRb.png')

完整程式碼

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Center(child: Image.network('https://i.imgur.com/ZX0PtRb.png')),
    );
  }
}

執行畫面

---

那今天【iT邦幫忙鐵人賽】就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉！！！掰掰～

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
www.freepik.com