применить borderRadius к виджету с помощью ShaderMask

Question

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

Мне бы хотелось, чтобы эта карта имела закругленные углы, но когда я применяю ShaderMask, нижняя часть линейного градиента становится черной, она занимает все пространство контейнера (ie контейнер имеет закругленный угол , но нижняя черная часть маски шейдера создает право угловой)

См. Изображение:

Вот код:

import 'package:flutter/material.dart';
import 'dart:math';

class ProfileCard extends StatelessWidget {
  final String imageName;
  final String title;

  ProfileCard({this.imageName, this.title});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        ShaderMask(
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.transparent, Colors.black],
            ).createShader(bounds);
          },
          blendMode: BlendMode.darken,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              image: DecorationImage(
                image: AssetImage('assets/images/$imageName.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Вверху слева и справа углы в порядке, потому что верхняя часть градиента прозрачна.

обратите внимание, что у стека есть другие дочерние элементы; Я просто удалил их, чтобы сделать код более читабельным. Также я попытался обернуть стек внутри контейнера и применить к нему контейнер borderRadius, но это не сработало.

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

Answer 1

Обернуть ShaderMask виджет с ClipRRect и предоставить то же значение свойства borderRadius, которое вы передали Container, содержащему изображение. ClipRRect обрезает дочерний элемент в скругленном прямоугольнике, который показывает Container правильно в закругленных углах со всех сторон. Пример рабочего кода ниже:

class ProfileCard extends StatelessWidget {
  final String imageName;
  final String title;

  ProfileCard({this.imageName, this.title});

  @override
  Widget build(BuildContext context) {
    return Stack(
        children: [
          ClipRRect(
              borderRadius: BorderRadius.all(
    Radius.circular(10.0)),
            child: ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.transparent,
                        Colors.black
                      ]
                  ).createShader(bounds);
                },
                blendMode: BlendMode.darken,
                child: Container(
                    width: 400,
                    height: 500,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(
                        Radius.circular(10.0),
                      ),
                      image: DecorationImage(
                        image: AssetImage('assets/jpg.jpg'),
                        fit: BoxFit.cover,
                      ),
                    )
                ))
          )
        ]
    );
  }
}

Надеюсь, что это ответ на ваш вопрос.