1 Вопрос: Флаттер Контейнер BoxShadow не показывает

вопрос создан в Thu, May 2, 2019 12:00 AM

Вот мой код на данный момент:

ClipRRect(
  borderRadius: BorderRadius.circular(11),
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: FractionalOffset.bottomLeft,
        end: FractionalOffset.topRight,
        colors: <Color>[Colors.purple, AppBaseColors.orange],
      ),
      boxShadow: [BoxShadow(color: Colors.yellow)]
    ),
    child: Material(
      child: InkWell(
        onTap: () {
          print("tapped");
        },
        child: Container(
          width: ButtonTheme.of(context).minWidth,
          height: ButtonTheme.of(context).height,
          child: Center(
            child: Text(
              "log in",
              style: TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
      color: Colors.transparent,
    ),
  ),
),

ЧТО Я ПОПРОБОВАЛ?

  • Добавьте boxShadow в первый контейнер .
  • Добавьте boxShadow во второй контейнер .
  • Добавьте еще один контейнер с boxShadow в качестве родителя для ClipRRect
  • Добавьте boxShadow в Material как shadowColor (ofc не работает, потому что у меня нет тени)
  • Также добавьте spreadRadius и blurRadius во всех приведенных выше случаях, но ничего не изменилось.

Есть идеи, что я сделал не так?

    
1
  1. Я думаю, что виджет материала скрывает эффект затенения блока, я бы предложил удалить контейнер и добавить возвышение к материалу или удалить виджет материала
    2019-05-02 15: 20: 58Z
  2. Я не могу этого сделать, или, по крайней мере, я не знаю, как ... Если я удалю виджет Материал, у меня не будет эффекта щелчка если вы нажмете на эту кнопку. Также, если я собираюсь удалить первый контейнер и добавить BoxDecoration на второй контейнер, я также попрощаюсь с эффектом щелчка, потому что. Так что это не совсем решение для меня, по крайней мере, с теми знаниями, которые у меня есть на данный момент.
    2019-05-02 16: 31: 38Z
  3. эффект щелчка обеспечивается виджетом чернильницы, поэтому я думаю, вам не о чем беспокоиться
    2019-05-03 07: 55: 11Z
1 ответ                              1                         

Вам нужно сделать эти изменения:

  • удалите виджет ClipRRect.
  • добавьте borderRadius внутрь BoxDecoration.
  • добавьте Offset к своему BoxShadow.

    Container(
              decoration: BoxDecoration(
                  color: Colors.blue,
                  gradient: LinearGradient(
                    begin: FractionalOffset.bottomLeft,
                    end: FractionalOffset.topRight,
                    colors: <Color>[Colors.purple, Colors.orange],
                  ),
                  borderRadius: BorderRadius.circular(11),
                  boxShadow: [
                    BoxShadow(color: Colors.yellow, offset: Offset(5.0, 5.0))
                  ]),
              child: Material(
                borderRadius: BorderRadius.circular(11),
                clipBehavior: Clip.hardEdge,
                child: InkWell(
                  onTap: () {
                    print("tapped");
                  },
                  child: Container(
                    width: ButtonTheme.of(context).minWidth,
                    height: ButtonTheme.of(context).height,
                    child: Center(
                      child: Text(
                        "log in",
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
                color: Colors.transparent,
              ),
            ),
    
0
2019-05-02 17: 05: 13Z
  1. На самом деле, это почти правильно, с этим решением у вас возникает проблема, заключающаяся в том, что если вы нажмете кнопку, эффект щелчка не будет иметь закругленных углов. Не могли бы вы также исправить эту последнюю деталь?
    2019-05-02 17: 01: 52Z
  2. готово, добавлены borderRadius и clipBehavior внутри виджета «Материал». Не забудьте использовать горячую перезагрузку
    2019-05-02 17: 05: 34Z
источник размещен Вот