Как сделать значок выреза с фоном во флаттере? - PullRequest
Новая
       44

Как сделать значок выреза с фоном во флаттере?

1 голос
/ 22 сентября 2019

Я бы хотел добиться следующего эффекта во Flutter со встроенными виджетами Flutter без использования PNG-изображения с прозрачностью.

Я пытался поэкспериментировать с backgroundBlendingMode, но безуспешно.

Я могутакже подумайте об использовании собственного художника для рисования круга и внутреннего креста, но в идеале я хотел бы использовать любой значок или любой другой виджет, чтобы вырезать фон.

Я также наткнулся на то, что называется CustomClipper.Это путь?

enter image description here

Допустим, у нас есть следующий виджет: 

  return Stack(
    children: <Widget>[
      SizedBox(
        height: 44,
        width: 44,
        child: Image.network(
          'https://images.pexels.com/photos/1295138/pexels-photo-1295138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
          fit: BoxFit.cover,
        ),
      ),
      Positioned(
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        child: Icon(
          Icons.close,
          color: Colors.black,
        ),
      ),
    ],
  );

Пример изображения можно взять от pexels .

1 Ответ

2 голосов
/ 23 сентября 2019

Хорошо, поэтому я нашел ответ на вопрос SO в этом вопросе .

Похоже, что правильным ключевым словом является cutout.

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

ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Cutout(
        color: Colors.white,
        child: Icon(
        Icons.close,
        color: Colors.white,
        ),
    ),
),

И клипер с помощью ShaderMask : 

class Cutout extends StatelessWidget {
  const Cutout({
    Key key,
    @required this.color,
    @required this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.srcOut,
      shaderCallback: (bounds) =>
          LinearGradient(colors: [color], stops: [0.0]).createShader(bounds),
      child: child,
    );
  }
}
...