我如何添加阴影的小部件像下面的图片?

这是我当前的小部件代码。


当前回答

Container可以带一个BoxDecoration(脱离你最初发布的代码),它带一个boxShadow:

decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
        BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
        ),
    ],
),

其他回答

检查BoxShadow和BoxDecoration

Container可以带一个BoxDecoration(脱离你最初发布的代码),它带一个boxShadow

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

截图:


Using BoxShadow (more customizations): Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.teal, borderRadius: BorderRadius.circular(20), boxShadow: [ BoxShadow( color: Colors.red, blurRadius: 4, offset: Offset(4, 8), // Shadow position ), ], ), ) Using PhysicalModel: PhysicalModel( color: Colors.teal, elevation: 8, shadowColor: Colors.red, borderRadius: BorderRadius.circular(20), child: SizedBox.square(dimension: 100), ) Using Card: Card( elevation: 8, shadowColor: Colors.red, child: Container( width: 100, height: 100, color: Colors.teal, ), ) Using Material: Material( elevation: 8, color: Colors.teal, shadowColor: Colors.red, borderRadius: BorderRadius.circular(20), child: SizedBox.square(dimension: 100), )

将小部件包装到容器中,并给它一个盒子阴影列表

我就是这么做的

    Container(
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey[200],
        blurRadius: 2.0, // has the effect of softening the shadow
        spreadRadius: 2.0, // has the effect of extending the shadow
        offset: Offset(
          5.0, // horizontal, move right 10
          5.0, // vertical, move down 10
        ),
      )
    ],
  ),
  child: Container( 
       color: Colors.white, //in your example it's blue, pink etc..
       child: //your content
  )

如果你在小部件周围包上一张卡片,然后用抬高道具玩一点,也许就足够了。

我使用这个技巧使我的ListTile在列表中看起来更好。

对于你的代码,它可以是这样的:

return Card(
   elevation: 3, // PLAY WITH THIS VALUE 
   child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
         // ... MORE OF YOUR CODE 
      ],
   ),
);