ClipPath 路径剪裁

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ClipPath路径剪裁示例",
      home: Scaffold(
        appBar: AppBar(
          title: Text("ClipPath路径剪裁示例"),
        ),
        body: Center(
          child: ClipPath(
            clipper: TriangleCliper(),
            child: SizedBox(
              width: 100.0,
              height: 100.0,
              child: Image.network(
                "https://start.lidong.me/asset/dong.png",
                fit: BoxFit.contain,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// 自定义三角形Clipper 类型为 Path
class TriangleCliper extends CustomClipper<Path> {
//  重写获取剪裁范围
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(50.0, 50.0);
    path.lineTo(50.0, 0.0);
    path.lineTo(100.0, 0.0);
//    path.moveTo(0.0, 0.0);
//    path.lineTo(100.0, 0.0);
//    path.lineTo(0.0, 100.0);
    path.close();
    return path;
  }

// 重写是否重新剪裁
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}