How to add a border to a clipped image?

Question

I am able to clip the image with ClipPath but how can I add a border to that clipped image as following?

Answer 1

You can Solve it this way :

1. create a CustomPainter with the same Path in the CustomClipper<Path>

Example :

Path path = Path();
path.lineTo(0.0, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * 0.8);
path.lineTo(0.0, size.height);
path.close();

2. create a Paint Object and with Stroke painting Style and the strokeWidth is the width of your custom border

CODE

Paint paint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth=10.0
  ..color = Colors.black;

and finally draw this path in canvas

canvas.drawPath(path, paint);

also you need to make sure that this CustomPaint is the child of your container

ClipPath(
          clipper: traingleclipper(),
          child: Container(
            color: Colors.white,
            child: CustomPaint(
              painter: ClipperBorderPainter(),
            ),
          ),
        )

in my Example this is the result :

also there is another way using a Stack in this way you will create the image with clipper and then create the CustomPaint with the same Path

Stack(
          children: <Widget>[
            ClipPath(
              clipper: CustomClip(),
                child: Image.network(
              "http://www.delonghi.com/Global/recipes/multifry/pizza_fresca.jpg",
              width: double.infinity,
              height: 400.0,
                  fit: BoxFit.cover,
            )),
            CustomPaint(
              painter: BorderPainter(),
              child: Container(
                height: 400.0,
              ),
            ),
          ],
        ),

Full Example