futter ClipPath 使用

废话少说先上效果

效果图

代码片段

---

注释中已经写的很清楚啦 大家还是看代码吧

---

import 'package:flutter/material.dart';

class WaveHeader extends StatefulWidget {
  @override
  WaveHeaderState createState() => new WaveHeaderState();
}

class WaveHeaderState extends State<WaveHeader> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: ClipPath(//剪切区域
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            decoration: BoxDecoration(
                color: Color(0xff622F74),
                gradient: LinearGradient(//渐变色
                    colors: [Colors.blue, Colors.deepOrangeAccent],//  blue deepOrangeAccent
                    begin: Alignment.centerRight, //起点
                    end: Alignment(-1.0, -1.0))),//终点
          ),
          Column(
            children: [
              Padding(
                  padding: EdgeInsets.only(top: 50.0),
                  child: Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: new BoxDecoration(
                          border: Border.all(color: Colors.amber, width: 2.0),
                          color: const Color(0xFFFFFFFF), // border color
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image: AssetImage("images/avatar.jpeg"))))),
            ],
          ),
        ],
      ),
      clipper: HeaderColor(),//主要部分
    ));
  }
}

class HeaderColor extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    //x坐标为0.0 y坐标为手机高度一半
    //到x坐标为手机宽度 到 手机宽度的一半减去100 达到斜线的结果
    //到x坐标为手机宽度 到 y坐标为手机宽度
    //完成
    var path = Path()
      ..lineTo(0.0, size.height / 2)
      ..lineTo(size.width, size.height / 2 - 100)
      ..lineTo(size.width, 0)
      ..close();
    return path;
  }

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