Flutter中的内阴影效应

92dk7w1h  于 2023-06-30  发布在  Flutter
关注(0)|答案(9)|浏览(153)

根据github issue,ShadowBox中还没有inset属性。有没有什么变通的办法来模拟内心阴影现在在扑.
我喜欢实现内部阴影效果,就像你可以看到下面的图片

uxhixvfz

uxhixvfz1#

decoration: BoxDecoration(
        boxShadow: [
          const BoxShadow(
            color: your_shadow_color,
          ),
          const BoxShadow(
            color: your_bg_color,
            spreadRadius: -12.0,
            blurRadius: 12.0,
          ),
        ],
      ),
g0czyy6m

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

结果:

ioekq8ef

ioekq8ef3#

我采纳了@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();
  }
}
llew8vvj

llew8vvj4#

詹姆斯的答案创造了一个扭曲形状的阴影。穆罕默德的答案是一个梯度,而不是适当的阴影,但 Alexandria 的解决方案完美地为我工作了一个小的修复!rectInner必须更新。

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

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

结果:

sigwle7e

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

zf2sa74q

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

vlju58qv8#

如果你是舒适的只是使用一个包,我发现这一个工程相当不错。
https://pub.dev/packages/sums_inner

fykwrbwg

fykwrbwg9#

找到这个包:https://pub.dev/packages/inner_shadow_widget
对我来说很完美:

InnerShadow(
 blur: 3,
 offset: const Offset(2, 2),
 child: Image.asset('path'),
),

无内阴影

内心阴影

相关问题