【從零開始學 Flutter 程式設計】Image 圖片元件

【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

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')),
    );
  }
}

執行畫面

---

那這次的課程就介紹到這邊囉～

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

我們下次再見囉！！！掰掰～