Наложение маски градиентного шейдера на часть изображения

Question

Я использую следующий код для создания шейдерной маски,

  ShaderMask _gradientPng() {
    return ShaderMask(
      child: Image(
        image: AssetImage('images/profile2.jpg'),
        height: 150,
        width: 100,
        fit: BoxFit.fill,
      ),
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          colors: [Color(0xFF396AEA), Color(0xFF3B6EEC)],
          stops: [
            0.0,
            0.5,
          ],
        ).createShader(bounds);
      },
      blendMode: BlendMode.overlay,
    );
  }

Эффект, которого я пытаюсь достичь, следующий:

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

Answer 1

Вам нужно лучше настроить LinearGradient.

Я изменяю конечный цвет на Colors.transparent .

Но также предоставляем begin и end точка для градиента

Попробуйте этот код.

LinearGradient(
  begin: Alignment.bottomCenter,
  end: Alignment.topCenter,
  colors: [Color(0xFF396AEA), Colors.transparent],
  stops: [
    0.0,
    0.7,
  ],
  tileMode: TileMode.mirror,
).createShader(bounds);

Играйте с цветами и остановками параметров для настройки эффекта.

Вы также можете изменить tileMode . Попробуйте TileMode.mirror или TileMode.clamp

---

Чтобы добавить радиус границы к изображению, оберните ваш виджет Image() следующим образом: ClipRRect()

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Image(
      image: AssetImage('images/profile2.jpg'),
      fit: BoxFit.fill,
    ),
  )