【问题讨论】：
标签： flutter flutter-layout shadow
decoration: BoxDecoration(
boxShadow: [
const BoxShadow(
color: your_shadow_color,
),
const BoxShadow(
color: your_bg_color,
spreadRadius: -12.0,
blurRadius: 12.0,
),
],
),
【讨论】：
Colors.transparent和Offset(0, 0)是默认值，所以这3行可以删除。
color。
这是我的工作：
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class InnerShadow extends SingleChildRenderObjectWidget {
const InnerShadow({
Key key,
this.blur = 10,
this.color = Colors.black38,
this.offset = const Offset(10, 10),
Widget child,
}) : super(key: key, child: child);
final double blur;
final Color color;
final Offset offset;
@override
RenderObject createRenderObject(BuildContext context) {
final _RenderInnerShadow renderObject = _RenderInnerShadow();
updateRenderObject(context, renderObject);
return renderObject;
}
@override
void updateRenderObject(
BuildContext context, _RenderInnerShadow renderObject) {
renderObject
..color = color
..blur = blur
..dx = offset.dx
..dy = offset.dy;
}
}
class _RenderInnerShadow extends RenderProxyBox {
double blur;
Color color;
double dx;
double dy;
@override
void paint(PaintingContext context, Offset offset) {
if (child == null) return;
final Rect rectOuter = offset & size;
final Rect rectInner = Rect.fromLTWH(
offset.dx,
offset.dy,
size.width - dx,
size.height - dy,
);
final Canvas canvas = context.canvas..saveLayer(rectOuter, Paint());
context.paintChild(child, offset);
final Paint shadowPaint = Paint()
..blendMode = BlendMode.srcATop
..imageFilter = ImageFilter.blur(sigmaX: blur, sigmaY: blur)
..colorFilter = ColorFilter.mode(color, BlendMode.srcOut);
canvas
..saveLayer(rectOuter, shadowPaint)
..saveLayer(rectInner, Paint())
..translate(dx, dy);
context.paintChild(child, offset);
context.canvas..restore()..restore()..restore();
}
}
然后在某处使用它：
InnerShadow(
blur: 5,
color: const Color(0xFF477C70),
offset: const Offset(5, 5),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color: Color(0xFFE9EFEC),
),
height: 100,
),
)
结果：
【讨论】：
我接受了@AlexandrPriezzhev 的回答并改进了它以使用标准的Shadow 类（包括其offset 字段的语义），添加了对多个阴影的支持，并削减了saveLayer() 调用应该让它更有效率：
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class InnerShadow extends SingleChildRenderObjectWidget {
const InnerShadow({
Key? key,
this.shadows = const <Shadow>[],
Widget? child,
}) : super(key: key, child: child);
final List<Shadow> shadows;
@override
RenderObject createRenderObject(BuildContext context) {
final renderObject = _RenderInnerShadow();
updateRenderObject(context, renderObject);
return renderObject;
}
@override
void updateRenderObject(
BuildContext context, _RenderInnerShadow renderObject) {
renderObject.shadows = shadows;
}
}
class _RenderInnerShadow extends RenderProxyBox {
late List<Shadow> shadows;
@override
void paint(PaintingContext context, Offset offset) {
if (child == null) return;
final bounds = offset & size;
context.canvas.saveLayer(bounds, Paint());
context.paintChild(child!, offset);
for (final shadow in shadows) {
final shadowRect = bounds.inflate(shadow.blurSigma);
final shadowPaint = Paint()
..blendMode = BlendMode.srcATop
..colorFilter = ColorFilter.mode(shadow.color, BlendMode.srcOut)
..imageFilter = ImageFilter.blur(
sigmaX: shadow.blurSigma, sigmaY: shadow.blurSigma);
context.canvas
..saveLayer(shadowRect, shadowPaint)
..translate(shadow.offset.dx, shadow.offset.dy);
context.paintChild(child!, offset);
context.canvas.restore();
}
context.canvas.restore();
}
}
【讨论】：
saveLayer 与paintChild 结合引起的。我还没有找到解决办法。另请参阅github.com/luigi-rosso/flutter-inner-shadow/issues/1 有没有人解决这个问题？
James 的回答在外部创建了一个阴影，使形状变形。 Mohammed 的答案是渐变而不是适当的阴影，但 Alexandr 的解决方案对我来说非常适合我的小修复！ rectInner 必须更新。
final Rect rectInner = Rect.fromLTWH(
offset.dx,
offset.dy,
size.width,
size.height,
);
【讨论】：
rectInner 会移除底部和右侧的阴影。 Alexandr's solution 对我来说效果很好。
您可以使用多个 BoxShadow 进行操作，其中第一个（下方）较暗，顶部较亮，并在其顶部加上灰色边框以使容器弹出。
代码：
Container(
width: 100,
height: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.fromBorderSide(
BorderSide(color: Colors.black12),
),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(color: Colors.black, blurRadius: 1, spreadRadius: 0),
BoxShadow(color: Colors.white, blurRadius: 10, spreadRadius: 5),
]),
child: Icon(Icons.pause, size: 70, color: Colors.black54),
),
结果：
【讨论】：
或者，您可以通过使用普通的盒子阴影和两个容器来解决这个问题 - 外部一个用作背景，内部一个提供阴影阴影。
代码：
Container(
padding: EdgeInsets.only(top: 30, left: 10, right: 10),
child: Container(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(12))),
padding: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8)),
boxShadow: [
BoxShadow(
color: Colors.white,
blurRadius: 10,
spreadRadius: 10)
]),
width: double.infinity,
height: 272,
child: Center(
child: Text("Content goes here"),
),
)))),
【讨论】：
詹姆斯的回答对我没有用。
所以我只是通过在我的容器/图像上方放置一个内部 渐变 层来实现它，因此，我得到了我想要的那种内部阴影（在我的情况下仅从底部）。
Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('images/bg.jpg') /*NetworkImage(imageUrl)*/,
),
),
height: 350.0,
),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Colors.grey.withOpacity(0.0),
Colors.black54,
],
stops: [0.95, 1.0],
),
),
)
],
)
【讨论】：
这是内阴影的代码
首先创建一个此类
class InnerShadow extends SingleChildRenderObjectWidget {
const InnerShadow({
this.blur = 10,
this.color = Colors.black38,
this.offset = const Offset(10, 10),
required Widget child,
}) : super(child: child);
final double blur;
final Color color;
final Offset offset;
@override
RenderObject createRenderObject(BuildContext context) {
final _RenderInnerShadow renderObject = _RenderInnerShadow();
updateRenderObject(context, renderObject);
return renderObject;
}
@override
void updateRenderObject(
BuildContext context, _RenderInnerShadow renderObject) {
renderObject
..color = color
..blur = blur
..dx = offset.dx
..dy = offset.dy;
}
}
class _RenderInnerShadow extends RenderProxyBox {
late double blur;
late Color color;
late double dx;
late double dy;
@override
void paint(PaintingContext context, Offset offset) {
if (child == null) return;
final Rect rectOuter = offset & size;
final Rect rectInner = Rect.fromLTWH(
offset.dx,
offset.dy,
size.width - dx,
size.height - dy,
);
final Canvas canvas = context.canvas..saveLayer(rectOuter, Paint());
context.paintChild(child!, offset);
final Paint shadowPaint = Paint()
..blendMode = BlendMode.srcATop
..imageFilter = ImageFilter.blur(sigmaX: blur, sigmaY: blur)
..colorFilter = ColorFilter.mode(color, BlendMode.srcOut);
canvas
..saveLayer(rectOuter, shadowPaint)
..saveLayer(rectInner, Paint())
..translate(dx, dy);
context.paintChild(child!, offset);
context.canvas
..restore()
..restore()
..restore();
}
}
像这样使用InnerShadow类后
InnerShadow(
blur: 2,
offset: const Offset(-3, -8),
color: Colors.black12.withOpacity(0.2),
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: Image.asset(
'assets/icons/abc.png',
fit: BoxFit.fill,
),
),
width: 30.h,
height: 30.h,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.01),
borderRadius: const BorderRadius.all(Radius.circular(30)),
),
),
)
这是我的输出
【讨论】：