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 ) ) )