Блог

Я пытаюсь отобразить изображение ниже в виде виджета в flutter.

В Figma этот виджет создается с использованием изображения и маски. Изображение слишком велико и выходит за пределы виджета. Маска содержит радиус границы и отбрасываемую тень. Радиус границы создает жесткий контур, а отбрасываемая тень рисует градиент на маске, когда маска применяется, изображение исчезает, используя себя в качестве отбрасываемой тени.

Я пытался использовать несколько методов для достижения этого эффекта в flutter, но безуспешно.

1. Фильтр фона Размывает изображение в стеке
2. Градиент шейдерной маски с различными режимами наложения
3. Пользовательский художник с тенями

Если у кого-нибудь есть какие-либо решения, это было бы очень ценно.

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

 Stack(
          children: [
            Center(
              child: Container(
                height: width*.6,
                width: width*.97,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        colorFilter: new ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.dstIn),
                        image: AssetImage('assets/images/138728.jpg')
                    ),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            ColorFiltered(
              colorFilter: ColorFilter.mode(Color(0xF2F2F2).withOpacity(0.8), BlendMode.srcOut),
              child: Stack(
                fit: StackFit.expand,
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: Color(0xF2F2F2),
                        backgroundBlendMode: BlendMode.srcOut), // This one will handle background   difference out
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: width*.5,
                      width: width*.9,
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Center(
              child: Container(
                height: width*.6,
                width: width*.97,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0xffF2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 3,
                width: width*.97 - 3,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x80F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 6,
                width: width*.97 - 6,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x60F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 9,
                width: width*.97 - 9,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x40F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 12,
                width: width*.97 - 12,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x40F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
          ],
        )