如何在颤动中在分隔线上创建阴影

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

根据您的喜好更改属性。