【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

留言

這個網誌中的熱門文章

16天記下7000單字

Costco 好市多 AFTERSHOKZ 骨傳導 藍牙運動耳機 AS650 開箱實測評價與心得

2019 最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄 (7/5 更新囉~)