Flutter中圆角矩形中的阴影

编程问答 2022-07-04

问题描述

我尝试将阴影添加到圆形容器中，但Flutter会添加阴影，就好像该容器是垂直矩形一样，我不希望这样。我在Google上查找了此问题，但找不到任何合适的解决方案，请帮帮我。

容器代码 

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 from @HardikKumar

REQUIRED

解决方法

对不起，但我测试了您的代码，阴影形状与装饰框的边框相同

Image

我只是将阴影的颜色编辑为黑色，这样我才能看得更好。

也许您想使用类似的按钮，您需要使用ButtonTheme来使用高度和宽度，

最终版：

使用Material，它具有高程属性，shapeBorder和BorderRadiusGeometry，您可以使用容器作为Material的父元素，作为宽度和高度。

Link to Material Widget on Flutter

,

代码中的问题：

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

外观如何：

enter image description here

如果您还有其他需要，请告诉我。

,

您可以从此代码中使用圆角矩形：）

Container(
   width: MediaQuery.of(context).size.width * 0.82,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:() {}
        ),)
,

据我对第一张图片的了解，您可以查看下面的代码。

    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),child: Container(
              width: MediaQuery.of(context).size.width * 0.82,//            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,)
hybrid-mobile-appshadowuser-interface