如何使用颤振制作小部件的一侧圆形边框？

Question

我正在尝试使用颤振中的容器小部件构建一侧圆形边框。我已经搜索过它，但找不到任何解决方案。

Container(
  width: 150.0,
  padding: const EdgeInsets.all(20.0),
  decoration: BoxDecoration(
    // borderRadius: BorderRadius.circular(30.0),
    /* border: Border(
      left: BorderSide()
    ),*/
  color: Colors.white
  ),
  child: Text("hello"),
),

Answer 1

使用BorderRadius.only并提供侧面

return Center(
  child: Container(
    height: 100,
    width: 100,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
      ),
      border: Border.all(
        width: 3,
        color: Colors.green,
        style: BorderStyle.solid,
      ),
    ),
    child: Center(
      child: Text(
        "Hello",
      ),
    ),
  ),
);

输出

Answer 2

您可以通过以下用于创建小部件的代码来实现此目的：

return Container(
  width: 150.0,
  padding: const EdgeInsets.all(20.0),
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.zero,
      bottomLeft: Radius.zero,
      bottomRight: Radius.zero,
    ),
  ),
  child: Text(
    "hello",
  ),
);

通过这种方式，您可以将左上角的圆形边框与颤动的容器小部件一起使用。

Answer 3

您也可以使用“形状功能”来完成。

  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(15.0),
      topLeft: Radius.circular(15.0),
    ),

Answer 4

还可以这样做，

 borderRadius: new BorderRadius.only(
     topLeft: const Radius.circular(30.0),
     bottomLeft: const Radius.circular(30.0),
 ),

Answer 5

如果您希望将容器的一侧倒圆，则可以使用BorderRadius.only并指定要倒圆的角，如下所示：

Container(
          width: 150.0,
          padding: const EdgeInsets.all(20.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0)),
              color: Colors.white),
          child: Text("hello"),
        ),

Answer 6

另一种方法是使用ClipRRect小部件。简单地用ClipRRect包裹你的小部件并给出一个radius。 您可以指定要使哪个角变圆。

ClipRRect(
      borderRadius: BorderRadius.only(topRight: Radius.circular(10)),
      child: Container(
        height: 40,
        width: 40,
        color: Colors.amber,
        child: Text('Hello World!'),
      ),
    );