BeveledRectangleBorder Flutter, tạo Container chứa góc vát (beveled) trong Flutter

Trong thiết kế giao diện Flutter đôi khi chúng ta bắt gặp loại view dạng góc vát như ảnh hướng đây, bạn có thể tưởng tượng giống như chiếc SIM điện thoại có góc vát ở một góc (tránh nhầm lẫn với bo góc tròn đều radius trong container).

Chúng ta sẽ sử dụng code sau để vẽ:

          Material(
            color: Colors.green,
            shape: BeveledRectangleBorder(
              side: BorderSide(width: 2),
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100), // Beveled top right
                bottomLeft: Radius.circular(200), // Beveled bottom left
              ),
            ),
            child: Container(
              width: 500,
              height: 450,
            ),
          )

Bạn có thể tùy chỉnh nhiều góc vát theo ý thích.