我如何添加阴影的小部件像下面的图片?
这是我当前的小部件代码。
我如何添加阴影的小部件像下面的图片?
这是我当前的小部件代码。
当前回答
我就是这么做的
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
)
其他回答
检查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
),
],
),
)
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
),
],
),
在开始使用这些答案之前,请查看Material Card小部件。它还允许你直接通过应用主题定义全局样式:
我就是这么做的
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
)
截图:
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), )