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

留言

這個網誌中的熱門文章

最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄

NS - Nintendo Switch 遊戲比價網

【從零開始學 Kotlin 程式設計】Android Kotlin 線上教學課程目錄