颤振使简单的渐变阴影

Question

我想构建一个渐变阴影小部件，如下所示。

此渐变从黑色开始，以白色结束，我该如何设计这种类型的小部件？

Answer 1

可以这样做

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

结果是：

您正在寻找结果吗？

Answer 2

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

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

输出：

Answer 3

您也可以尝试以下方法：

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

输出