Flutter: How to do custom shape container

Question

I'm looking for a solution for the following design:

Do you have any ideas how to create a container like this and add different pictures?

Answer 1

I dont actually know, how you would change the form of the container but you can definitely do the rounded corners and the shadow. For that you just use the decoration-property like this:

Container(
  width: 200,
  height: 75,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        blurRadius: 4,
        offset: Offset(4, 8), // Shadow position
      ),
    image: DecorationImage(image: AssetImage(assetname))
    ],
  ),
)

I hope this helps you a bit...

Answer 2

You can use CustomPainter to draw over UI. You also use the paint's path on ClipPath .

Paint class

class CardPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.blue;

    Path path = Path()
      ..lineTo(size.width * .7, 0)
      ..lineTo(size.width * .6, size.height * .6)
      ..lineTo(size.width * .8, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

To use this paint.

ClipRRect(
  borderRadius: const BorderRadius.all(Radius.circular(16)),
  child: SizedBox(
    width: 600,
    height: 200,
    child: Stack(
      alignment: Alignment.center,
      children: [
        /// background image
        Container(
          color: Colors.deepPurple,
        ),
        CustomPaint(
          painter: CardPaint(),
          size: const Size(600, 200),
        ),
      ],
    ),
  ),
),

Output

You can include padding around it and play with decoration and paint points.

Answer 3

You can use CustomClipper

class CustomPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = new Path();
    path.lineTo(size.width - 50, 0);
    path.lineTo(size.width - 90, size.height / 2);
    path.lineTo(size.width - 50, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

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

Container(
  width: 220,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(8),
    border: Border.all(
      color: Colors.grey.withOpacity(0.5),
    ),
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 0),
        color: Color(0xFFB7B7B7),
        spreadRadius: 3,
        blurRadius: 8,
      )
    ],
  ),
  child: Stack(
    children: [
      Positioned(
        right: 0,
        top: 0,
        bottom: 0,
        left: 0,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('assets/moutain.jpeg')),
            borderRadius:
                BorderRadius.all(Radius.circular(8.0)),
            color: Colors.redAccent,
          ),
        ),
      ),
      Positioned(
        left: 0,
        top: 0,
        bottom: 0,
        child: ClipPath(
          clipper: CustomPath(),
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              color: Color(0xFF417DF0),
              borderRadius: BorderRadius.circular(8),
            ),
            width: 200,
            height: 100,
          ),
        ),
      )
    ],
  ),
)

Result