Прозрачная карта, но с эффектом тени от высоты

У меня возникли проблемы с созданием карты прозрачного белого цвета (непрозрачность 0,4). Но, с тенью от эффекта возвышения.

Если я уберу возвышение, эффекта тени не будет, и карта будет выглядеть прозрачной. Но если я добавлю высоты, эффект прозрачности испортится. Вот что я пробовал:

  Widget cardMenu(String title) {
return Container(
  padding: EdgeInsets.symmetric(horizontal: UIComponent.componentPadding),
  child: Stack(
    alignment: Alignment.topCenter,
    children: [
      Positioned(
        top: -100,
        child: Container(
          child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Text(
                title,
                style: TextStyle(color: Colors.transparent),
              ),
            ),
          ),
        )
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Card(
          elevation: 0,
          color: Colors.white.withOpacity(0.4),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(UIComponent.cardButtonRadius),
            ),
          ),
          child: Container(
            height: 350,
            width: 180,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  padding: EdgeInsets.all(UIComponent.widgetPadding),
                  child: Text(
                    title,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: UIComponent.h1,
                      color: UIComponent.neutralDark,
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      )
    ],
  ),
);

}

Вывод моего кода:

первый

Что я ожидаю:

второй


flutter dart material-design opacity elevation
person Christophorus Anindityo N    schedule 11.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Привет Christophorus Anindityo N

Создайте класс для свойства BoxShadow контейнера.

class CustomBoxShadow extends BoxShadow {
  final BlurStyle blurStyle;

  const CustomBoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.blurStyle = BlurStyle.normal,
  }) : super(color: color, offset: offset, blurRadius: blurRadius);

  @override
  Paint toPaint() {
    final Paint result = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
    assert(() {
      if (debugDisableShadows)
        result.maskFilter = null;
      return true;
    }());
    return result;
  }
}

И используйте этот класс в контейнере

Container(
 child: Center(
  child: Container(
    height: 200.0,
    width: 300.0
    decoration: BoxDecoration(
     boxShadow: [
      CustomBoxShadow(
       color: Colors.black,
       offset: Offset(5.0, 5.0),
       blurRadius: 5.0,
       blurStyle: BlurStyle.outer
      )
     ],
    ),
   child: Text("Transparent Card with Shadow", style:TextStyle(fontSize:15))),
  )
 )

Теперь вы умеете кодировать :)

person Hardik Khatri    schedule 11.02.2021
comment
Привет!, спасибо, что ответили на мой вопрос. Я попробовал ваш код выше, но у него не было закругленной границы, как у карты, которую я спрашивал. Можете ли вы сделать так, чтобы он имел форму закругленной границы? - person Christophorus Anindityo N; 14.02.2021
comment
добавьте borderRadius: BorderRadius.circular(10) в свойство украшения, и все готово. - person Hardik Khatri; 22.02.2021