развевается только нижняя тень на контейнер

Question

Я пробовал много решений, но не мог получить то, что хочу.

/questions/49522862/dobavlenie-teni-vnizu-tsvetnogo-kontejnera-v-flattere/49522876#49522876 Я применил этот ответ, но не смог получить правильный ответ. У контейнера все еще есть тень. Как я могу этого добиться?

а также я попытался окружить свой виджет 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,
      ],
    ),
  ),
),

Это создаст shadow из 15 units вокруг Container. Теперь тень можно перемещать с помощью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

Я не знаю, действительно ли другие примеры устанавливают тень только для низа, но вот известное решение:

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

Установите размытие тени с помощью, а затем установите spreadRadius отрицать blurRadius затем используйте dy собственность Offset() конструктор, вы устанавливаете его в положительные значения, чтобы контролировать нижнюю часть тени.

Answer 3

Все, что вам нужно сделать, это поиграть со значением смещения. И я думаю, вам не нужно оборачивать этоMaterial.

Смещение - это смещение тени от рамки. Требуется 2 значения типа double,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-значение вашего смещения.