flutter圆角图片,flutter数字角标

flutter 设置圆角的两种方式

ClipOval例子(默认全圆角):

创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、成都做网站、成都网站设计易于使用并且具有良好的响应性。

new ClipOval(

child: Container(

width: 100,

height: 100,

color: Colors.red,

ClipRRect例子(可自定义圆角):

new ClipRRect(

borderRadius: BorderRadius.circular(50),

child: Container(

width: 100,

height: 100,

color: Colors.red,

)

Flutter踩坑之旅

记录下自己踩过的坑,怕忘了

一.TextField:

1.去掉输入数字的计数:decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉获取和失去焦点时边框改变颜色的效果:decoration内border: InputBorder.none,

3.去边框时设置BorderSide的width为0或color: Colors.transparent后依然存在边框时,需要设置为borderSide: BorderSide.none

4.设置背景色需要在decoration内 filled:true, fillColor: Colors.blue同时设置才会显示

二.Uint8List类型和string类型,Listint的转换

连续两次base64解码时,参数只能使用string类型,但是base64解码后是Uint8List类型,此时需要将Uint8List类型转换为string类型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint转Uint8List:读取接口时获取的数据是Listint的图片数据,想显示时需要转成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.报错:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

这是因为dio请求返回的数据默认是以json的格式读取的,而返回的数据是密文形式,需要修改dio的Options的responseType为ResponseType.PLAIN,这样返回的数据就以字符串形式处理.

四.去掉点击控件背景出现的水波纹效果,即去掉md的效果:

在main.dart的MaterialApp内的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局设置占满全屏却无效的问题

使用Scaffold的body的布局默认是沉浸式的,将状态栏一起包含了,可以通过在body后添加一层SafeArea即可.

布局设置double.infinity占满全屏高度却无效,大部分情况都是因为某一级的父布局的高度已经有了限制,所以设置充满屏幕只会充满父布局,有些widget默认是按内容填充类似wrap_content就会导致写布局的过程中自己没有限制高度但最后的布局不是自己想要的,可以给各个父布局设置不同背景颜色来查看是从哪儿开始被限制了高度来排查问题.

六.占满剩余空间,类似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator设置进度值的颜色为单一颜色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.给LinearProgressIndicator设置圆角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多层column且内容的高度都不确定需要占满剩余空间,需要每层的column的内容都嵌套一层expanded来申明每层都占满剩余的空间,否则最里面的内容层需要指定高度,不然会报错

九.Container设置最小/大宽度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑动的widget嵌套:

1.解决滑动冲突:内层嵌套的滑动widget设置physics:NeverScrollableScrollPhysics()

2.解决滑动嵌套ui显示不出来或者报错,内层的滑动widget设置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓运行报错Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties内添加android.enableJetifier=true和android.useAndroidX=true并点击右上角的open for editing in android studio,运行成功后就可以了

十二.使用textfield时的文字ui总是很高

使用了maxlength且只是在textfield的InputDecoration设置counterStyle的颜色为透明使下面的计数文字消失会导致文字ui很高,counter的计数文字只是颜色是透明但依然在布局中占了位置所以导致文字很高,直接使用counterText:""即可

十三.使用ListView报错Vertical viewport was given unbounded height

需要将ListView放入Expanded内部

Flutter 设置圆角的几种方案

这种方式设置的圆角如果显示在四角的子控件设置了渐变，将会影响圆角显示

上图可以看到我们设置了margin的left为4后，左边的圆角明显显示有问题，被截了一部分

这种方式添加的圆角不会被子控件覆盖

Flutter圆角设置组件

flutter能设置圆角的组件：ClipRRect、ClipOval、CircleAvatar、BoxDecoration BorderRadius.circular、BoxDecoration BoxShape.circle

1.ClipRRect：将 child 剪裁为宽高相等的圆角组件，可设置圆角度数

2.ClipOval：将child裁剪为宽高相等的圆角组件（只包括圆形和椭圆形），不可设置圆角度数

3.CircleAvatar：只能设置自身圆形，不能裁剪child

4.BoxDecoration BorderRadius.circular 设置自身圆角,不能裁剪child

4.BoxDecoration BoxShape.circle 只能设置自身为圆形，不能裁剪child

参考： flutter 圆角设置

Flutter之Image Widget（六）

Image（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM

构造方法

Image: 从ImageProvider获取数据

Image.network: 加载网络图片。

Image.asset: 加载本地图片文件。

new Image.file: 加载本地图片文件(File文件）图片。

new Image.memory: 加载Uint8List资源图片（byte数组）图片。

常用属性

方式一：CircleAvatar

CircleAvatar可以实现圆形头像，也可以添加一个子Widget：

在图片上加一个文本

方式二：ClipOval

ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

方式三：Container+BoxDecoration

方法一：ClipRRect

方法二：Container + BoxDecoration

补充知识点

Icon字体图标和图片图标的区别？

Colors.red 是一个MaterialColor对象，为什么可以使用[]（Colors.red[10]）来设置颜色 ?

MaterialColor 继承于ColorSwatch，ColorSwatch中有[] 运算符重载;

flutter中图片的使用

Image中三个重要的属性：

alignment：图片的对齐方式

fit：图片的展示方式

repeat：图片平铺方式

圆角图片：第一种方式

圆角图片：第二种方式

文章题目：flutter圆角图片,flutter数字角标
URL链接：http://scyanting.com/article/dsdogsi.html