查看 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
),
],
),
)
将 BoxDecoration
与 BoxShadow
一起使用。
这是一个操作以下选项的可视化演示:
不透明度
偏移量
偏移
模糊半径
传播半径
动画 gif 在颜色方面表现不佳。您可以在设备上自己尝试。
https://i.stack.imgur.com/OqBxp.gif
这是该演示的完整代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ShadowDemo(),
),
);
}
}
class ShadowDemo extends StatefulWidget {
@override
_ShadowDemoState createState() => _ShadowDemoState();
}
class _ShadowDemoState extends State<ShadowDemo> {
var _image = NetworkImage('https://placebear.com/300/300');
var _opacity = 1.0;
var _xOffset = 0.0;
var _yOffset = 0.0;
var _blurRadius = 0.0;
var _spreadRadius = 0.0;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Center(
child:
Container(
decoration: BoxDecoration(
color: Color(0xFF0099EE),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, _opacity),
offset: Offset(_xOffset, _yOffset),
blurRadius: _blurRadius,
spreadRadius: _spreadRadius,
)
],
),
child: Image(image:_image, width: 100, height: 100,),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 80.0),
child: Column(
children: <Widget>[
Spacer(),
Slider(
value: _opacity,
min: 0.0,
max: 1.0,
onChanged: (newValue) =>
{
setState(() => _opacity = newValue)
},
),
Slider(
value: _xOffset,
min: -100,
max: 100,
onChanged: (newValue) =>
{
setState(() => _xOffset = newValue)
},
),
Slider(
value: _yOffset,
min: -100,
max: 100,
onChanged: (newValue) =>
{
setState(() => _yOffset = newValue)
},
),
Slider(
value: _blurRadius,
min: 0,
max: 100,
onChanged: (newValue) =>
{
setState(() => _blurRadius = newValue)
},
),
Slider(
value: _spreadRadius,
min: 0,
max: 100,
onChanged: (newValue) =>
{
setState(() => _spreadRadius = newValue)
},
),
],
),
),
)
],
);
}
}
截屏:
https://i.stack.imgur.com/B8B7F.png
使用 BoxShadow(更多自定义):Container(宽度:100,高度:100,装饰:BoxDecoration(颜色:Colors.teal,borderRadius:BorderRadius.circular(20),boxShadow:[BoxShadow(颜色:Colors.red,blurRadius:4 , offset: Offset(4, 8), // 阴影位置 ), ], ), )
使用 PhysicalModel:PhysicalModel(颜色:Colors.teal,海拔:8,shadowColor:Colors.red,borderRadius:BorderRadius.circular(20),孩子:SizedBox.square(尺寸:100),)
使用卡片:卡片(海拔:8,shadowColor:Colors.red,child:Container(宽度:100,高度:100,颜色:Colors.teal,),)
使用材质:材质(海拔:8,颜色:Colors.teal,shadowColor:Colors.red,borderRadius:BorderRadius.circular(20),孩子:SizedBox.square(尺寸:100),)
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
),
],
),
在 Container 内使用带有 shadowColor 的 Material,如下所示:
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,
),
),
)
PhysicalModel 将帮助您为其提供高程阴影。
Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
SizedBox(
height: 60,
),
Container(
child: PhysicalModel(
borderRadius: BorderRadius.circular(20),
color: Colors.blue,
elevation: 18,
shadowColor: Colors.red,
child: Container(
height: 100,
width: 100,
),
),
),
SizedBox(
height: 60,
),
Container(
child: PhysicalShape(
color: Colors.blue,
shadowColor: Colors.red,
elevation: 18,
clipper: ShapeBorderClipper(shape: CircleBorder()),
child: Container(
height: 150,
width: 150,
),
),
)
],
),
)
https://i.stack.imgur.com/0SsHt.jpg
我就是这样做的
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
)
给定的答案可以解决外部阴影,即小部件周围的问题。我想要一个在边界内的小部件上的阴影,并且根据 github issue,ShadowBox 中还没有插入属性。我的解决方法是使用堆栈小部件添加一个带有渐变的小部件层,以便看起来小部件本身具有阴影。您必须将 mediaQuery 用于尺寸,否则布局将在不同设备上混乱。这是一个代码示例,以便更好地理解:
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("assets/sampleFaces/makeup.jpeg"),
// fit: BoxFit.cover,
),
),
height: 350.0,
),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Colors.black.withOpacity(0.0),
Colors.black54,
],
stops: [0.95, 5.0],
),
),
)
],
),
class ShadowContainer extends StatelessWidget {
ShadowContainer({
Key key,
this.margin = const EdgeInsets.fromLTRB(0, 10, 0, 8),
this.padding = const EdgeInsets.symmetric(horizontal: 8),
this.circular = 4,
this.shadowColor = const Color.fromARGB(
128, 158, 158, 158), //Colors.grey.withOpacity(0.5),
this.backgroundColor = Colors.white,
this.spreadRadius = 1,
this.blurRadius = 3,
this.offset = const Offset(0, 1),
@required this.child,
}) : super(key: key);
final Widget child;
final EdgeInsetsGeometry margin;
final EdgeInsetsGeometry padding;
final double circular;
final Color shadowColor;
final double spreadRadius;
final double blurRadius;
final Offset offset;
final Color backgroundColor;
@override
Widget build(BuildContext context) {
return Container(
margin: margin,
padding: padding,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(circular),
boxShadow: [
BoxShadow(
color: shadowColor,
spreadRadius: spreadRadius,
blurRadius: blurRadius,
offset: offset,
),
],
),
child: child,
);
}
}
在您开始使用这些答案之一重新发明轮子之前,请查看 Material Card widget。它还允许您直接通过应用程序主题定义全局样式:
https://flutter.github.io/assets-for-api-docs/assets/material/card.png
如果您将 Card
包裹在 Widget
周围并使用 elevation
道具玩一下,也许就足够了。
我使用这个技巧使我的 ListTile
在 Lists
中看起来更漂亮。
对于您的代码,它可能如下所示:
return Card(
elevation: 3, // PLAY WITH THIS VALUE
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// ... MORE OF YOUR CODE
],
),
);
将您的小部件包装到容器中并为其提供框阴影列表
borderRadius: BorderRadius.circular(10.0)
。InkWell
小部件中包装一个小部件,以获得点击时的连锁反应。