Flutter Container with BeveledRectangleBorder border

Question

I am trying to create a view something like this.

But the issue is that while using BeveledRectangleBorder, the border width of that side is not matching the whole border width.

I am using the below code:-

Material(
      color: Colors.black,
      clipBehavior: Clip.antiAlias,
      shape: BeveledRectangleBorder(
        side: BorderSide(
          color: Color.fromRGBO(255, 255, 255, .10),
          width: 2,
        ),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(
            ScreenUtil().setHeight(15),
          ),
        ),
      ),
      child: new Container(
        width: 100,
        decoration: BoxDecoration(
          color: Color.fromRGBO(255, 255, 255, .10),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(5),
            topRight: Radius.circular(5),
            bottomRight: Radius.circular(5),
          ),
          border: Border.all(
            color: Color.fromRGBO(255, 255, 255, .10),
            width: 2,
          ),
        ),
        child: new Container(
          height: 50,
          width: 100,
        ),
      ),
    )

Answer 1

Not sure on how to explain this but in my example the two lines are the same length. It looks like the rendering is taking the width from BorderSide and not using that perpendicular to the beveled edge but just as a horizontal width.

I'm not sure on how to fix this and if this is working as intended or a bug. You might want to post this as an issue on the flutter github.

Material(
        color: Colors.black,
        clipBehavior: Clip.antiAlias,
        shape: BeveledRectangleBorder(
          side: BorderSide(
            color: Color.fromRGBO(255, 0, 0, 1),
            width: 30,
          ),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(
              80,
            ),
          ),
        ),
        child: new Container(
          width: 200,
          height: 300,
          color: Colors.black,
        ),
      )