BoxShadow 被绘制在其他小部件之上答案

【问题标题】：BoxShadow is drew above other widgetsBoxShadow 被绘制在其他小部件之上
【发布时间】：2021-06-06 19:21:00
【问题描述】：

我正在尝试使列表中的项目发光。为此，我在项目的装饰中使用 box-shadow。但它出现在其他项目之上，而不是作为背景。如何在兄弟项目后面绘制 boxshadow。

class ShadowItem extends StatelessWidget {
  const ShadowItem({required this.isWithGlow});

  final bool isWithGlow;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      decoration: BoxDecoration(
        boxShadow: (isWithGlow)
            ? [
                BoxShadow(
                  color: Colors.blue,
                  blurRadius: 42.0,
                  spreadRadius: 0.0,
                  offset: Offset(
                    0.0,
                    12.0,
                  ),
                ),
              ]
            : [],
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(19),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter shadow

【解决方案1】：

您需要设置框之间的边距，以便阴影不会溢出到另一个小部件上。我正在使用 flutter_neumorphic: ^3.0.3 包来解决您的问题。

这里是代码

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

class ShadowItem extends StatelessWidget {
  const ShadowItem({required this.isWithGlow});

  final bool isWithGlow;

  @override
  Widget build(BuildContext context) {

    return Container(
      height: 100,
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
      child: Neumorphic(
        style: isWithGlow
            ? NeumorphicStyle(
            shadowDarkColor: Colors.blue,
            shadowLightColor: Colors.blue,
            depth: 10,
            shape: NeumorphicShape.convex,
            lightSource: LightSource.right)
            : NeumorphicStyle(
          depth: 2,
          shape: NeumorphicShape.convex,
        ),
        child: Container(
         
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(19),
          ),
        ),
      ),
    );
  }
}

【讨论】：

当然，添加边距会有所帮助，但这不是正确的解决方案，我必须在没有这么大的边距的情况下实现设计。
你可以无边距查看。
当然，我已经检查过它没有边距，它仍然与其他小部件重叠。我使用了 Box Shadow 参数（半径和偏移量）并根据要求达到了一些类似的结果。
小部件中的实际问题是边距。假设您为小部件提供 (20) box-shadow 值，那么如果是单个小部件，则必须需要具有相同值的边距，如果在列表视图中，则必须有一半的边距。如果不！您的影子将与另一个小部件重叠。
如果没有边距空间来显示，你的影子就毫无意义

【解决方案2】：

您需要显示BoxShadow 取决于isWithGlow。因此您可以设置灰色阴影背景而不是空阴影[] 并为容器设置边距，它将突出显示您的容器。

return Container(
   height: 100,
   margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
   decoration: BoxDecoration(
     boxShadow: (isWithGlow)
         ? [
             BoxShadow(
               color: Colors.blue,
               blurRadius: 42.0,
               spreadRadius: 0.0,
               offset: Offset(
                 0.0,
                 12.0,
               ),
              ),
             ]
           : [
              BoxShadow(
                 color: Colors.grey[400]!,
                 blurRadius: 42.0,
                 spreadRadius: 0.0,
                 offset: Offset(
                   0.0,
                   12.0,
                 ),
               ),
             ],  
           ),
           child: Container(
             decoration: BoxDecoration(
               color: Colors.white,
               borderRadius: BorderRadius.circular(19),
           ),
          ),
        );

【讨论】：

添加边距不是解决方案，因为我必须实现没有这么大边距的设计。