1. 资源文件创建图片文件
在根目录创建images文件夹。
在pubspec.yaml文件中，放开 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. 系统自带Icon图标展示
在pubspec.yaml文件中，dependencies: 依赖下面添加
dependencies:
flutter:
sdk: flutter
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2 # 系统自带Icon图标
则在Widget中
Icon(
Icons.wifi_tethering,
size: 16.0,
color: Colors.white,
),
具体Icon展示样式，我现在是根据展示的英文来显示，具体是否满足还得显示出来查看，有点不确定性。
也可以根据自己切图展示图片比较方便。
3. 常用的展示资源方法
- 通过Icon显示图片
Icon(
Icons.wifi_tethering,
size: 16.0,
color: Colors.white,
),
- 通过本地路径展示图片
Image(
image: AssetImage("images/mine/mine_setting.png"),
width: 20.0,
),
- 网络图片
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')
- 图标button
IconButton(
onPressed: (){
},
icon: Image.asset(
"images/mine/mine_verifyInfo/verifyInfo.png",
width: 20,
color: Colors.white,
),
)
- 有默认占位符和淡入效果
在图片加载过程中，给用户展示一张默认的图片，能提高用户体验。
使用FadeInImage组件来达到这个功能。FadeInImage能处理内存中，App资源或者网络上的图片。
在flutter pub中搜索"transparent_image", 并根据例子安装相应版本的框架
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", 并根据例子安装相应版本的框架, 此框架类似于sdwebImage. 具体使用可以参考其文档
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
