flutter 僅底部陰影到容器

Question

我嘗試了很多解決方案，但我無法得到我想要的。

https://stackoverflow.com/a/56744034/4862911我申請了這個答案，但無法得到正確的回應。 容器頂部仍有陰影。 我怎樣才能實現它？

而且我還嘗試用Material包圍我的小部件。 但仍然無法解決問題。

 Material(
        elevation: 5,
        child: Container(
          height: 50,
          child: _buildEloAndLevel(),

        ),
      ),

Answer 1

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
      ],
    ),
  ),
),

這將在Container周圍創建15 units的shadow 。 現在，可以使用offset屬性移動陰影。 由於我們不希望頂部有陰影，我們可以將其向下移動15 units 。

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
        offset: Offset(0, 15), // horizontally move 0, vertically move 15,
      ],
    ),
  ),
),

Answer 2

您需要做的就是玩弄偏移量的值。 而且我認為您不需要用Material包裝它。

偏移量是陰影從盒子中的位移。 它需要 2 個雙精度值， Offset(x, y);

例子：

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(15.0, 20.0),
                  blurRadius: 20.0,
                )
              ],
            color: Colors.red,
          ),
        ),

來自我的提示：為確保陰影不會出現在容器頂部，請確保模糊半徑不大於偏移的 y 值。

Answer 3

我不知道其他示例是否真的只為底部設置陰影，但這是一個已知的解決方案：

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  blurRadius: 20.0,
                  spreadRadius: -20.0,
                  offset: Offset(0.0, 25.0),
                )
              ],
            color: Colors.red,
          ),
        ),

使用blurRadius設置陰影的模糊，然后將spreadRadius設置為負blurRadius然后使用Offset()構造函數的dy屬性，將其設置為正值以控制陰影底部。