Flutter: How to do custom shape container-CodePudding

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?

CodePudding user response：

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...

CodePudding user response：

You can use

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

CodePudding user response：

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