How to make black box in this image with one side free line in flutter-CodePudding

How to make a black box in this image with one side free line in the flutter.

CodePudding user response：

I usually make an SVG of the background you want (in that case this shape) and then make a stack where I have the SVG Picture kind of in the background and then I position the other widgets on top of that. If that is what you mean I recommend you to get into SvgPicture.asset... that's what I mostly use. For the Stack, you just write the Stack then children, in that you put a Container with the SvgPicture.asset as the child and then use the Positioned widget to put the other widgets (in this case some text and container widgets) on top... I hope this helped you

CodePudding user response：

What you want is a Clipper and a

CodePudding user response：

Screenshot:

What you're seeing is not border but a shadow. If you want you can use border with border: Border(left: , right: , bottom: ) but again it will not give you that effect.

Container(
  width: 100,
  height: 100,
  padding: EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: Colors.black,
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 3),
        blurRadius: 5,
        spreadRadius: 2,
        color: Colors.grey[700]!,
      ),
    ],
  ),
  child: Image.network(
    'https://bitcoin.org/img/icons/opengraph.png?1641218872',
    fit: BoxFit.cover,
  ),
)