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,
          ),
        ),
      ),    

所有圓形容器結果：