Shutter clip clipping component

Flutter Clip Clipping components

sketch

Flutter Some clipping tools are provided , For clipping components .

Use

Original picture

Image.asset("images/avatar.jpg", width: 100, height: 100);

ClipRect

Rectangular clipping .

ClipRect(
    child: Align(
        child: avatar,
        alignment: Alignment.topCenter,
        heightFactor: 0.5,
    ),
)

ClipOval

Round cut .

ClipOval(
    child: avatar,
    clipBehavior: Clip.antiAlias, // Anti-Aliasing , Usually used to deal with circles and arcs 
)

ClipRRect

Rectangle fillet clipping .

ClipRRect(
  child: avatar,
  borderRadius: BorderRadius.circular(10),
)

ClipPath

Path clipping .

shape：ShapeBorder type , Define clipping shapes .
	- RoundedRectangleBorder： Rounded rectangle .
	- ContinuousRectangleBorder： Smooth transition between line and fillet , And RoundedRectangleBorder similar , But the fillet effect is smaller .
	- StadiumBorder： Like a football field , Half round at both ends .
	- BeveledRectangleBorder： Beveled rectangle .

ClipPath.shape(
    shape: const StadiumBorder(),
    child: SizedBox(
        width: 100,
        height: 60,
        child: Image.asset("images/avatar.jpg", fit: BoxFit.cover),
    ),
),

Custom clipping

Container(
    color: Colors.red,
    child: ClipRect(
        clipper: MyClipper1(),
        child: avatar,
    ),
)

class MyClipper1 extends CustomClipper<Rect> {
    @override
    Rect getClip(Size size) {
        return const Rect.fromLTWH(0, 0, 30, 30);
    }

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

Container(
    color: Colors.green,
    child: ClipPath(
        clipper: TrianglePath(),
        child: avatar,
    ),
)

class TrianglePath extends CustomClipper<Path> {
    @override
    Path getClip(Size size) {
        var path = Path();
        path.moveTo(size.width / 2, 0);
        path.lineTo(0, size.height);
        path.lineTo(size.width, size.height);
        path.close();
        return path;
    }

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