1. 資源文件創(chuàng)建圖片文件
在根目錄創(chuàng)建images文件夾。
在pubspec.yaml文件中，放開(kāi) assets:注釋
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- images/
- images/mine/
- images/mine/mine_verifyInfo/
- images/main/
2. 系統(tǒng)自帶Icon圖標(biāo)展示
在pubspec.yaml文件中，dependencies: 依賴(lài)下面添加
dependencies:
flutter:
sdk: flutter
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2 # 系統(tǒng)自帶Icon圖標(biāo)
則在Widget中
Icon(
Icons.wifi_tethering,
size: 16.0,
color: Colors.white,
),
具體Icon展示樣式，我現(xiàn)在是根據(jù)展示的英文來(lái)顯示，具體是否滿(mǎn)足還得顯示出來(lái)查看，有點(diǎn)不確定性。
也可以根據(jù)自己切圖展示圖片比較方便。
3. 常用的展示資源方法
- 通過(guò)Icon顯示圖片
Icon(
Icons.wifi_tethering,
size: 16.0,
color: Colors.white,
),
- 通過(guò)本地路徑展示圖片
Image(
image: AssetImage("images/mine/mine_setting.png"),
width: 20.0,
),
- 網(wǎng)絡(luò)圖片
Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)
or
Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')
- 圖標(biāo)button
IconButton(
onPressed: (){
},
icon: Image.asset(
"images/mine/mine_verifyInfo/verifyInfo.png",
width: 20,
color: Colors.white,
),
)
- 有默認(rèn)占位符和淡入效果
在圖片加載過(guò)程中，給用戶(hù)展示一張默認(rèn)的圖片，能提高用戶(hù)體驗(yàn)。
使用FadeInImage組件來(lái)達(dá)到這個(gè)功能。FadeInImage能處理內(nèi)存中，App資源或者網(wǎng)絡(luò)上的圖片。
在flutter pub中搜索"transparent_image", 并根據(jù)例子安裝相應(yīng)版本的框架
import 'package:transparent_image/transparent_image.dart';
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
- 使用緩存圖片
在flutter pub中搜索"cached_network_image", 并根據(jù)例子安裝相應(yīng)版本的框架, 此框架類(lèi)似于sdwebImage. 具體使用可以參考其文檔
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
