根据github issue,ShadowBox中还没有inset属性。有没有什么变通的办法来模拟内心阴影现在在扑.我喜欢实现内部阴影效果,就像你可以看到下面的图片
uxhixvfz1#
decoration: BoxDecoration( boxShadow: [ const BoxShadow( color: your_shadow_color, ), const BoxShadow( color: your_bg_color, spreadRadius: -12.0, blurRadius: 12.0, ), ], ),
g0czyy6m2#
我是这样做的:
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, ), )
结果:
ioekq8ef3#
我采纳了@AlexandrPriezzhev的答案,并将其改进为使用标准的Shadow类(包括其offset字段的语义),添加了对多个阴影的支持,并删除了一个saveLayer()调用,这应该会使它更有效:
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(); } }
llew8vvj4#
詹姆斯的答案创造了一个扭曲形状的阴影。穆罕默德的答案是一个梯度,而不是适当的阴影,但 Alexandria 的解决方案完美地为我工作了一个小的修复!rectInner必须更新。
final Rect rectInner = Rect.fromLTWH( offset.dx, offset.dy, size.width, size.height, );
hgb9j2n65#
你可以使用多个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), ),
sigwle7e6#
或者,您可以通过使用普通的框阴影和两个容器来解决这个问题-外部的一个作为背景,内部的一个提供阴影。代码:
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"), ), )))),
生产:x1c 0d1x
zf2sa74q7#
詹姆斯的回答对我不起作用。所以我简单地通过在容器/图像上方放置一个内部渐变层来制作它,因此,我有我想要的那种内部阴影(在我的情况下只从底部)。
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], ), ), ) ], )
vlju58qv8#
如果你是舒适的只是使用一个包,我发现这一个工程相当不错。https://pub.dev/packages/sums_inner
fykwrbwg9#
找到这个包:https://pub.dev/packages/inner_shadow_widget对我来说很完美:
InnerShadow( blur: 3, offset: const Offset(2, 2), child: Image.asset('path'), ),
无内阴影
内心阴影
9条答案
按热度按时间uxhixvfz1#
g0czyy6m2#
我是这样做的:
然后在某处使用它:
结果:
ioekq8ef3#
我采纳了@AlexandrPriezzhev的答案,并将其改进为使用标准的
Shadow
类(包括其offset
字段的语义),添加了对多个阴影的支持,并删除了一个saveLayer()
调用,这应该会使它更有效:llew8vvj4#
詹姆斯的答案创造了一个扭曲形状的阴影。穆罕默德的答案是一个梯度,而不是适当的阴影,但 Alexandria 的解决方案完美地为我工作了一个小的修复!rectInner必须更新。
hgb9j2n65#
你可以使用多个BoxShadow来做,其中第一个(下图)颜色较深,顶部是一个较浅的,顶部是灰色的边框,使容器弹出。
代码:
结果:
sigwle7e6#
或者,您可以通过使用普通的框阴影和两个容器来解决这个问题-外部的一个作为背景,内部的一个提供阴影。
代码:
生产:x1c 0d1x
zf2sa74q7#
詹姆斯的回答对我不起作用。
所以我简单地通过在容器/图像上方放置一个内部渐变层来制作它,因此,我有我想要的那种内部阴影(在我的情况下只从底部)。
vlju58qv8#
如果你是舒适的只是使用一个包,我发现这一个工程相当不错。
https://pub.dev/packages/sums_inner
fykwrbwg9#
找到这个包:https://pub.dev/packages/inner_shadow_widget
对我来说很完美:
无内阴影
内心阴影