How to make curve border using dart flutter?

Question

I have tried borders, but I didn't get the actual result. Actually, I need this type of border/shape like bottomRight.[enter image description here][1]

See image: https://i.stack.imgur.com/LVtTQ.png

Answer 1

Refer this code:

 Container(
        height: 90,
        width: 90,
        padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        margin: EdgeInsets.only(left: 3.0, right: 3.0, bottom: 5.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0.0),
              topRight: Radius.circular(0.0),
              bottomLeft: Radius.circular(0.0),
              bottomRight: Radius.circular(18.0)),
        ),
        child: Text(
          "Hai hello" ?? "", 
        ),
      ),

Answer 2

Try to put a container in the stack with box-shadow and use a positioned widget to bring it to the bottom right corner.

For example:

use stack and this stack have 3 widgets 
  one is the rectangle with border and 
  the other one is the smaller white rectangle on the first widget to cover the black border and 
  the last one is the triangle with box-shadow 
remember to use box-shadow with both widgets and 
positioned widget will put both of them to the right bottom corner

A different solution you can use is a custom image, but you will struggle with the responsiveness.

I hope it helped.

Answer 3

You can achieve it by using Container with BorderRadius.only like below:

return Container(
  width: 100.0,
  height: 150,
  padding: const EdgeInsets.all(20.0),
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.zero,
      topRight: Radius.zero,
      bottomLeft: Radius.zero,
      bottomRight: Radius.circular(20.0),
    ),
  ),
);

or if you have that triangle png image, you can stack it to the bottom right like this:

return Stack(
  alignment: Alignment.bottomRight,
  children: [
    Container(
      width: 100.0,
      height: 150,
      padding: const EdgeInsets.all(20.0),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.zero,
          topRight: Radius.zero,
          bottomLeft: Radius.zero,
          bottomRight: Radius.circular(20.0),
        ),
      ),
    ),
    Image.asset("images/paper_flip.png", width: 30, height: 30,),
  ],
);