flutter裁剪三角形，并设置三角形最长边阴影（类似钉钉登录页右上角图标样式）

需求

需要使用flutter创建类似钉钉登录页右上角图表样式

过程

图标

图标直接从阿里巴巴图标库中下载png文件，并设置相应颜色

三角形阴影

样式的主要难点在三角形及三角形阴影这里

1、三角形的裁剪有两种方法：

• 第一种是 使用边框实现三角形
  参考博客：使用边框设置三角形
  效果：可以看到明显的白色分割线，所以这个方法 pass
  

  实现代码：

Container(
            width: 0,
            height: 0,
            margin: EdgeInsets.all(100),
            decoration: const BoxDecoration(
              border: Border(
                // 四个值 top right bottom left
                bottom: BorderSide(
                    color: Colors.transparent, // 朝上; 其他的全部透明transparent或者不设置
                    width: 100,
                    style: BorderStyle.solid),
                right: BorderSide(
                    color: Colors.transparent, // 朝左;  把颜色改为目标色就可以了；其他的透明
                    width: 100,
                    style: BorderStyle.solid),
                left: BorderSide(
                    color: Colors.blue, // 朝右；把颜色改为目标色就可以了；其他的透明
                    width: 100,
                    style: BorderStyle.solid),
                top: BorderSide(
                    color: Colors.blue, // 朝下;  把颜色改为目标色就可以了；其他的透明
                    width: 100,
                    style: BorderStyle.solid),
              ),
            ),
          ),

• 第二种方法：使用ClipPath 按照自定义的路径剪裁
  参考博客：flutter-剪裁（Clip）
  效果：可以看到，一个完整的三角形就出现了
  
  代码：

//绘制三角形
class __MyPathClipper extends CustomClipper<Path> {
    
    
  @override
  Path getClip(Size size) {
    
    
    var path = Path();
    path.moveTo(size.width, 0);
    path.lineTo(0, size.height); //图片的左下角坐标
    path.lineTo(size.width, size.height); //图片的右下角左边
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    
    
    return false;
  }
}

//使用
 ClipPath(
 clipper: __MyPathClipper(),
     child: Container(
          color: Colors.red,
          width: 200,
          height: 200,
 )),

2、阴影效果

在阴影效果这方面，我尝试了很多
首先，直接使用Container自带的decoration属性设置阴影，但是效果并不明显，无论怎样尝试，阴影都是一条直线，没有渐变效果

代码：

ClipPath(
 clipper: __MyPathClipper(),
 child: Container(
    width: 60,
    height: 60,
    decoration: const BoxDecoration(
    color: Color.fromRGBO(250, 250, 250, 1),
    boxShadow: [
    BoxShadow(
      color: Colors.grey,
      offset:Offset(-3, -3),
      blurRadius: 2),
 ])))

后来，想到可以使用渐变色来模拟阴影效果
得到了最终的样式

代码：

ClipPath(
  clipper: __MyPathClipper(),
  child: Container(
     width: 60,
     height: 60,
     decoration: const BoxDecoration(
     gradient: LinearGradient(
         begin: Alignment.topLeft, 
         end: Alignment.bottomRight,
         stops: [0.0, 0.495 ],//渐变的位置  起始位置 到 终止位置
         colors: [//渐变的颜色，从颜色1 到 颜色2
           Color.fromARGB(255, 3, 3, 3),
           Color.fromRGBO(250, 250, 250, 1),
 ]))))

全部代码

Stack(
                                  children: <Widget>[
                                    const Positioned(
                                      top: 5,
                                      left: 5,
                                      child: Image(
                                        image: AssetImage('images/code.png'),
                                        width: 40,
                                        height: 40,
                                      ),
                                    ),
                                    Positioned(
                                        bottom: 0,
                                        right: 0,
                                        child: ClipPath(
                                            clipper: __MyPathClipper(),
                                            child: Container(
                                                width: 60,
                                                height: 60,
                                                decoration: const BoxDecoration(
                                                    gradient: LinearGradient(
                                                        begin: Alignment
                                                            .topLeft, //右上
                                                        end: Alignment
                                                            .bottomRight,
                                                        stops: [
                                                      0.0,
                                                      0.495
                                                    ],
                                                        colors: [
                                                      Color.fromARGB(
                                                          255, 3, 3, 3),
                                                      Color.fromRGBO(
                                                          250, 250, 250, 1),
                                                    ]))))),
                                  ],
                                ),