Flutter UI基础 - ClipRRect

通过UI部分了解一下 Flutter中切割圆形，角度边缘等问题。

---

通过下面代码可以实现，下图效果

效果如下

 

如果修改 borderRadius:const BorderRadius.all(const Radius.circular(90.0))  的 90.0 的不同值会得到不同的圆角效果，这里读者自行验证。

这里的  borderRadius:const BorderRadius.all(const Radius.circular(90.0))，还可以修改成

borderRadius:const BorderRadius.horizontal(right: Radius.circular(90),left: Radius.circular(50)),效果如下：

 

// borderRadius: const BorderRadius.vertical(top: Radius.circular(50),bottom: Radius.circular(90)), 小伙伴们可以自行研究，会有不同的现象。

还可以通过transform:new Matrix4.rotationZ(0.1), 给蓝色的方块进行垂直屏幕的Z轴旋转。效果如下：

还可以给蓝色方块添加Text，然后旋转

运行效果：