2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結
哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第十一天,KT 將為大家來介紹,如何使用 Image 元件來顯示手機端和網路上的圖片。
Image 圖片元件,可用來顯示手機內和網路上圖片的元件。
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('')),
);
}
}
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