【從零開始學 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 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉!!!掰掰~

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)