Question

根据github issue，ShadowBox中没有inset属性。现在有什么变通办法如何在抖动中模拟内部阴影。

我喜欢实现内部阴影效果，就像在以下图像中看到的一样

Answer 1

这是我的工作：

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,
  ),
)

结果： result

Answer 2

James的答案在阴影外面产生了扭曲的形状。穆罕默德的答案是渐变而不是适当的阴影，但是亚历山大的解决方案对我来说只要花一点点钱就能完美地工作！ rectInner必须更新。

final Rect rectInner = Rect.fromLTWH(
    offset.dx,
    offset.dy,
    size.width,
    size.height,
);

Answer 3

我接受了@AlexandrPriezzhev的回答，并对其进行了改进，以使用标准的Shadow类（包括其offset字段的语义），增加了对多个阴影的支持，并消除了{ {1}}调用，这应该使其效率更高：

saveLayer()

Answer 4

decoration: BoxDecoration(
        color: Colors.transparent,
        boxShadow: [
          const BoxShadow(
            color: your_shadow_color,
            offset: const Offset(0.0, 0.0),
          ),
          const BoxShadow(
            color: your_bg_color,
            offset: const Offset(0.0, 0.0),
            spreadRadius: -12.0,
            blurRadius: 12.0,
          ),
        ],
      ),

Answer 5

嗯，总有一种更简单的方法来做到这一点。使用包：

如果您要进行仿形设计，这里有一个很好的包 --> flutter_neumorphic

Answer 6

詹姆斯的回答对我没有帮助。

因此，我只是简单地通过在容器/图像上方放置一个内部 Gradient 层来实现这一点，因此，我有了想要的内部阴影（仅在我的情况下是底部）。< / p>

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],
          ),
        ),
      )
    ],
  )

Answer 7

或者，您可以通过使用普通框阴影和两个容器来解决此问题 - 外部一个用作背景，内部一个提供阴影阴影。

代码：

      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"),
                    ),
                  )))),

产生：

颤动中的内部阴影效果

7 个答案: