flutter圆形相关

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

圆角图片

方式1: ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
)

方式2: Container + BoxDecoration

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)

各种形状

使用ShapeDecoration可以做出各种形状

• 斜切角: BeveledRectangleBorder
• 圆角: RoundedRectangleBorder
• 超椭圆: SuperellipseShape
• 体育场: StadiumBorder
• 圆形: CircleBorder

//斜切角形状示例
Container(
  width: 120,
  height: 120,
  decoration: ShapeDecoration(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    ),
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！

《Flutter Dart 语言编程入门到精通》

• 第一章 Dart语言基础
• 第二章 Dart 异步编程



• 第三章 异步之 Stream 详解
• 第四章 Dart标准输入输出流



• 第五章 Dart 网络编程
• 第六章 Flutter 爬虫与服务端



• 第七章 Dart 的服务端开发
• 第八章 Dart 调用C语言混合编程
• 第九章 LuaDardo中Dart与Lua的相互调用

《Flutter实战：第二版》

• 第一章：起步
• 第二章：第一个Flutter应用
• 第三章：基础组件
• 第四章：布局类组件
• 第五章：容器类组件

• 第六章：可滚动组件
• 第七章：功能型组件
• 第八章：事件处理与通知
• 第九章：动画
• 第十章：自定义组件



• 第十一章：文件操作与网络请求
• 第十二章：Flutter扩展
• 第十三章：国际化
• 第十四章：Flutter核心原理
• 第十五章：一个完整的Flutter应用