Flutter 圓角矩形中的陰影

Question

我嘗試向圓形容器添加陰影，但 Flutter 會添加陰影，就好像容器是垂直矩形一樣，這是我不想要的。 我在谷歌上查找了這個問題，但找不到任何合適的解決方案，請幫助我。

容器代碼

Container(
  width: MediaQuery.of(context).size.width * 0.82,
  height: MediaQuery.of(context).size.height * 0.28,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    color: Color(0xFFF9D276),
    borderRadius: BorderRadius.circular(35),
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 4),
        color: Color(0xFFF9D276).withOpacity(0.15),
        spreadRadius: 4,
        blurRadius: 50
      )
    ]
  ),
)

來自@HardikKumar 的更新答案以及我真正想要的方式

Answer 1

對不起，我測試了你的代碼，陰影形狀與裝飾框的邊框相同

圖片

我只是將陰影的顏色編輯為黑色，以便更好地看到它。

也許你想使用這樣的按鈕，你需要使用 ButtonTheme 來使用高度和寬度，

最終版：

使用 Material ，它具有高程屬性、shapeBorder 和 BorderRadiusGeometry，您可以使用容器作為 Material 的寬度和高度的父級。

鏈接到 Flutter 上的 Material 小部件

Answer 2

代碼中的問題：

1. blurRadius為 50，當您更改spreadRadius或offset時，您不會看到陰影有任何差異

2. opacity為 0.15，您幾乎看不到任何陰影（無論是黑色還是白色背景色）

試試這個代碼：

Container(
  width: MediaQuery.of(context).size.width * 0.82,
  height: MediaQuery.of(context).size.height * 0.28,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    color: Color(0xFFF9D276),
    borderRadius: BorderRadius.circular(35),
    boxShadow: [
      BoxShadow(
        //offset: Offset(0, 4),
        color: Color(0xFFF9D276), //edited
        spreadRadius: 4,
        blurRadius: 10  //edited
      )
    
  ),
),

它的樣子：

如果您還需要什么，請告訴我。

Answer 3

您可以從此代碼中使用圓角矩形:)

Container(
   width: MediaQuery.of(context).size.width * 0.82,
   height: MediaQuery.of(context).size.height * 0.28,
   decoration: BoxDecoration(
      color: Colors.green[700],
      shape: BoxShape.rectangle,
      borderRadius:BorderRadius.all(
          Radius.circular(25)
          )
      ),
       margin: EdgeInsets.only(right: 8,top: 8),
       child: IconButton(
         icon: Icon(
            Icons.send,
            color: Colors.yellow[600],
            ),
         onPressed:() {}
        ),
  )

Answer 4

據我從您的第一張圖片中得到一些想法，您可以查看下面的代碼。

    Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: Color(0xff000000),
            boxShadow: <BoxShadow>[
              new BoxShadow(
                color: Color(0x73000000),
                blurRadius: 5.0,
                spreadRadius: 1,
                offset: new Offset(-10.0, 0.0),
              ),
            ],
          ),
          width: MediaQuery.of(context).size.width * 0.82,
          height: MediaQuery.of(context).size.height * 0.25,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.82,
              height: MediaQuery.of(context).size.height * 0.28,
//            padding: const EdgeInsets.symmetric(horizontal: 12),
              decoration: BoxDecoration(
                color: Color(0xFFF9D276),
                boxShadow: <BoxShadow>[
                  new BoxShadow(
                    color: Color(0xff000000),
                    blurRadius: 0.0,
                    spreadRadius: -2,
                    offset: new Offset(2.0, 0.0),
                  ),
                ],
                borderRadius: BorderRadius.circular(35),
              ),
            ),
          ),
        ),
      )

Answer 5

你可以試試這個

              Stack(
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 2, top: 2),
                    child: Align(
                      alignment: Alignment.center,
                      child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          primary: Colors.red,
                          backgroundColor: Colors.gray,
                          fixedSize: const Size(200, 50),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16.0),
                          ),
                          side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
                        ),
                        child: const Text("Text"),
                        onPressed: () => print('Text'),
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 2, bottom: 2),
                    child: Align(
                      alignment: Alignment.center,
                      child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          primary: Colors.red,
                          backgroundColor: Colors.gray,
                          fixedSize: const Size(200, 50),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16.0),
                          ),
                          side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
                        ),
                        child: const Text("Text"),
                        onPressed: () => print('Text'),
                      ),
                    ),
                  )
                ]
              )