如何在 flutter 中的分隔线上创建阴影

Question

我有一个分隔线，我想在上面创建一个底部阴影，所以基本上我想要一条带有底部阴影的线。

我怎样才能做到这一点？

Divider(height:1)

Answer 1

您根本不需要使用 Divider。 容器应该足够了。 像这样：

Container(
              height: 1.0,
              decoration: BoxDecoration(
                color: Colors.black,
                boxShadow: [
                  BoxShadow(
                    color: Colors.orange,
                    spreadRadius: 5,
                    blurRadius: 5,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
            )

编辑：另一种选择是不使用框阴影，而是使用线性渐变来仅在底部模拟阴影，如下所示：

Container(
              height: 10,
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(
                    color: Colors.black,
                    width: 1.0,
                  ),
                ),
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.orange,
                    Colors.white,
                  ],
                ),
              ),
            ) 

干杯

Answer 2

您可以将分隔线包裹到一个容器中，然后像这样将阴影应用于您的容器。

    Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 2,
                blurRadius: 7,
                offset: Offset(0, 6), // changes position of shadow
              ),
            ],
          ),
          child: Divider(
            height: 1,
            indent: 15,
            endIndent: 15,
            thickness: 1,
            color: Colors.blue,
          ),
        ),

根据您的喜好更改属性。

Answer 3

我想在 flutter 的 app 中的分隔线下创建一个阴影效果，但是在 flutter 的分隔线 class 中没有这个属性。所以我们需要 Container Widget 来创建这样的效果。 观看解决方案视频，了解如何实现阴影效果。

1. 不使用分频器小部件。
2. 分隔线下的阴影效果是借助 Container Widget 实现的。
3. 在 Container Widget 中，使用 BoxDecoration 来创建这样的效果