flutter 小部件的自定义边框

Question

我有一个自定义边框可以在小部件周围绘制。 我附上了一张图片

谁能知道如何在 flutter 中做到这一点？

Answer 1

这是一种简单的方法，您可以在widget中实现实心边框。

Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(
              width: 5,
              color: Colors.red,
            ),
          ),
        ),

Answer 2

请参考以下代码：

Padding(
  padding: const EdgeInsets.all(15.0),
    child: Container(
        height: 100,
        width: double.infinity,
        decoration: BoxDecoration(
         border: Border.all(
            width: 4,
            color: Colors.black,),
        borderRadius:BorderRadius.circular(10.0),),
        child: Center(
           child: Text('Custom Border'),),),
 ),

Answer 3

用Container包裹小部件

 Container(
            decoration: BoxDecoration(
            border: Border.all(width: 5.0, color: Colors.black),
             borderRadius: BorderRadius.circular(20.0) )// change value as per your needs
     child: //your widget
        )

Answer 4

试试下面的代码希望它对你有帮助。

如果您只想圆角顶角：

  Container(
        width: double.infinity,
        height: 100,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
          ),
          border: Border.all(
            width: 3,
            color: Colors.black,
          ),
        ),
      ),

结果顶部圆角：

如果您希望所有容器四舍五入：

Container(
        width: double.infinity,
        height: 100,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
            width: 5,
            color: Colors.black,
          ),
        ),
      ),    

所有圆形容器结果：