1. 本地图片
Image.asset加载项目资源包的图片
//先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets
Image.asset( 'images/cat.jpg', width: 200, height: 200, )
Image.file加载手机内置或外置存储的图片
//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限
Image.file(
File('/0/images/cat.jpg'),
width: 200,
height: 200,
)2. 网络图片
Image.network无本地缓存
Image.network( 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg', width: 200, height: 200, )
FadeInImage.assetNetwork淡入效果,无本地缓存
FadeInImage.assetNetwork( placeholder: 'images/avatar.png', image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg', width: 200, height: 200 )
CachedNetworkImage第三方控件,有本地缓存和淡入效果
//1、将依赖框架配置到pubspec.yaml文件
dependencies: cached_network_image: ^0.7.0
//2、引入相关类
import 'package:cached_network_image/cached_network_image.dart';
//3、使用控件,默认自带图片淡入效果
CachedNetworkImage( imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg', width: 200, height: 200, )
圆形头像
方式1: CircleAvatar
CircleAvatar(
//头像半径
radius: 60,
//头像图片 -> NetworkImage网络图片,AssetImage项目资源包图片, FileImage本地存储图片
backgroundImage: NetworkImage(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'
),
)方式2: ClipOval
ClipOval(
child: Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 120,
height: 120,
fit: BoxFit.cover,
),
)方式3: Container + BoxDecoration
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
fit: BoxFit.cover
)
)
)
