Flutter 制作简单的渐变阴影

Question

我想要制作一个渐变阴影小部件，如下所示。

这个渐变从黑色开始到白色结束，我该如何设计这种小部件？

- DolDurma

---

这可以通过容器 ---> 装饰 ---> 渐变来实现。 - NoobN3rd

@NoobN3rd，我不想让容器周围有阴影，我只需要其他小部件的底部。 - DolDurma

Answer 1

可以这样做：

Container(
        height:100,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.black, Colors.white],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter
          )
        ),
      ),

结果如下：

这是结果：

您正在寻找这个结果吗？

- NoobN3rd

Answer 2

你可以尝试这个方法：

最初的回答

Container(
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(0, 10),
        blurRadius: 10,
        spreadRadius: 0.5,
      ),
    ],
  ),
)

输出

最初的回答

- CopsOnRoad

Answer 3

这主要取决于您的使用情况，例如，如果您想显示阴影，可以直接使用

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            offset: Offset(0, 1),
            blurRadius: 10,
            spreadRadius: 0.5,
          ),
        ],
      ),
      height: 10,
      width: 100,
    )
  ],
)

输出：

- CopsOnRoad