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