iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0

2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結


哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第十一天,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


上一篇
Day 10:Button 按鈕元件
下一篇
Day 12:TextField 文字輸入框元件
系列文
Flutter 程式設計入門實戰 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言