我如何添加阴影的小部件像下面的图片?
这是我当前的小部件代码。
我如何添加阴影的小部件像下面的图片?
这是我当前的小部件代码。
当前回答
检查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
),
],
),
)
其他回答
如果你在小部件周围包上一张卡片,然后用抬高道具玩一点,也许就足够了。
我使用这个技巧使我的ListTile在列表中看起来更好。
对于你的代码,它可以是这样的:
return Card(
elevation: 3, // PLAY WITH THIS VALUE
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// ... MORE OF YOUR CODE
],
),
);
我就是这么做的
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
)
将小部件包装到容器中,并给它一个盒子阴影列表
在容器内使用shadowColor材质,如下所示:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Color(0xffA22447).withOpacity(.05),
offset: Offset(0, 0),
blurRadius: 20,
spreadRadius: 3)
]),
child: Material(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)),
elevation: 5,
shadowColor: Color(0xffA22447).withOpacity(.05),
color: Color(0xFFF7F7F7),
child: SizedBox(
height: MediaQuery.of(context).size.height / 3,
),
),
)
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
),
],
),