图片

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 图片、圆形头像、圆角图片....各种形状的更多相关文章

  1. Android Xfermode 实战 实现圆形、圆角图片

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42094215,本文出自:[张鸿洋的博客] 1.概述 其实这篇本来准备Androi ...

  2. Android BitmapShader 实战 实现圆形、圆角图片

    转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...

  3. Android_BitmapShader实现圆形、圆角图片

    转:http://blog.csdn.net/lmj623565791/article/details/41967509,本文出自:[张鸿洋的博客] 1.概述 记得初学那会写过一篇博客Android ...

  4. 【转】Android BitmapShader 实战 实现圆形、圆角图片

    转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...

  5. android 拍照,裁切,上传圆形头像, 图片等比缩放

    最近太忙了,没有空更新博客,其它部分以后再更新: 今天给大家分享的是解决解析图片的出现oom的问题,我们可以用BitmapFactory这里的各种Decode方法,如果图片很小的话,不会出现oom,但 ...

  6. HTML+CSS:圆形和圆角图片格式

    效果展示 实现代码 <!DOCTYPE html> <html> <head> <title>JcMan</title> <style ...

  7. Android实现圆形圆角图片

    本文主要使用两种方法实现图形圆角图片 自定View加上使用Xfermode实现 Shader实现 自定View加上使用Xfermode实现 /** * 根据原图和变长绘制圆形图片 * * @param ...

  8. Android Xfermode 真实 实现全面、圆角图片

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/42094215.本文出自:[张鸿洋的博客] 1.概述 事实上这篇本来准备Andro ...

  9. php 圆角图片处理

    /** * 把图片转换成圆角 * @param string $imgpath * @param int $radius * @return resource */ public function r ...

  10. Android 圆形头像 自己动手

    圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...

随机推荐

  1. HP DL388 Gen9 Raid P440ar 工具

    HP DL388 Gen9 服务器raid升级P440ar,原先的hpacucli 不能使用,新的工具为hpssacl hpssacli-2.10-14.0.x86_64.rpm 下载地址:wget ...

  2. 关于 or 判断都是Ture的问题

    问题: 1. ret1 = [1, 2, 3, 4] if 11 or 33 in ret1: print("ok") else: print("no") 2. ...

  3. HiveQL 数据装在与导出

    一.向管理表中装载数据 1.向表中装载数据load 1)load语法 2)LOCAL  指的是操作系统的文件路径,否则默认为HDFS的文件路径 3)overwrite关键字 如果用户指定了overwr ...

  4. 初识QuartusII 9.0(破解,半加器的仿真,综合:下)

    完成波形的随机设置(A,B任意给定高低电平即可,只是当作测试信号),选择任务栏Assignments[Setings],设置Simulation mode为functional,其余保持不变点击ok. ...

  5. Angular动态组件

    一.主页面: app.component.html: <button (click)="load();">动态</button> 2<div #dom ...

  6. 《挑战30天C++入门极限》C/C++中字符串常量的不相等性及字符串的Copy

        C/C++中字符串常量的不相等性及字符串的Copy #include <iostream>    void main(void)  {      if("test&quo ...

  7. golang-切片copy

    package main import ( "fmt" ) func main() { fmt.Println("-------------") data := ...

  8. 贪心算法训练(九)——Best Cow Line(字典序最小问题)

    原题链接:Best Cow Line 1. 问题描述 2. 输入 6 A C D B C B 3. 输出 ABCBCD 4.思路分析 不断地取原字符串 S 中开头和末尾比较小的字符串放到 T 的末尾 ...

  9. 《自制编程语言--基于C语言 郑钢》学习笔记

    <自制编程语言>学习笔记 本仓库内容 <自制编程语言>源码 src/sparrow.tgz <自制编程语言>读书笔记 docs/* <自制编程语言>样章 ...

  10. CF1213F Unstable String Sort(差分)

    其实全部可以为同一种字符串,但题目要求\(k\)种,我们考虑开始尽可能不同,最后再取\(min\) 考虑\(A\),全部不同:再做\(B\),\(S[b_{i-1}]\le S[b_{i}]\)如果开 ...