Как показать на прозрачной части изображения изображение, которое скрывается за ним во Флаттере? - PullRequest
Новая
       6

Как показать на прозрачной части изображения изображение, которое скрывается за ним во Флаттере?

0 голосов
/ 11 февраля 2020

введите описание изображения здесь введите описание изображения здесь

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

Expanded(
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    MenuButton(
                      buttonText: Constants.X,
                      destinationScreen: X.id,
                      backgroundImage: "red_check.jpg",
                    ),
                    Positioned(
                      top: 170.0,
                      child: SizedBox(
                        width: 320,
                        height: 170,
                        child: MenuButton(
                          buttonText: Constants.Y,
                          destinationScreen: Y.id,
                          backgroundImage: "yellow_check.png",
                          bCover: false,
                        ),
                      ),
                    ),
                  ],
                ),
              ),

class MenuButton extends StatelessWidget {
  final String buttonText;
  final String destinationScreen;
  final String backgroundImage;
  final bool bCover;

  MenuButton(
      {this.buttonText,
      this.destinationScreen,
      this.backgroundImage = '',
      this.bCover = true});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        child: Container(
            child: Center(
              child: Text(
                (Utils.getString(context, buttonText)),
                style: TextStyle(color: Colors.white, fontSize: 22.0),
              ),
            ),
            width: 120,
            height: 40,
            decoration: BoxDecoration(
              color: Colors.black,
              image: DecorationImage(
                  image: AssetImage(Constants.IMAGES_PATH + backgroundImage),
                  fit: bCover ? BoxFit.cover : BoxFit.fill),
              // button text
            )),
        onTap: () {
          Navigator.pushNamed(context, destinationScreen);
        });
  }
}

Любые идеи будут оценены.

1 Ответ

0 голосов
/ 11 февраля 2020

BoxDecoration указанный вами имеет черный фон: 

@override
  Widget build(BuildContext context) {
    return GestureDetector(
        child: Container(
            child: Center(
              child: Text(
                (Utils.getString(context, buttonText)),
                style: TextStyle(color: Colors.white, fontSize: 22.0),
              ),
            ),
            width: 120,
            height: 40,
            decoration: BoxDecoration(
              color: Colors.black, // ? I'M HERE
              image: DecorationImage(
                  image: AssetImage(Constants.IMAGES_PATH + backgroundImage),
                  fit: bCover ? BoxFit.cover : BoxFit.fill),
              // button text
            )),
        onTap: () {
          Navigator.pushNamed(context, destinationScreen);
        });
  }

Просто установите BoxDecoration цвет на Colors.transparent или не указывайте его вообще (по умолчанию Colors.transparent) вот так: 

@override
  Widget build(BuildContext context) {
    return GestureDetector(
        child: Container(
            child: Center(
              child: Text(
                (Utils.getString(context, buttonText)),
                style: TextStyle(color: Colors.white, fontSize: 22.0),
              ),
            ),
            width: 120,
            height: 40,
            decoration: BoxDecoration(
              color: Colors.transparent, // FIXED
              image: DecorationImage(
                  image: AssetImage(Constants.IMAGES_PATH + backgroundImage),
                  fit: bCover ? BoxFit.cover : BoxFit.fill),
              // button text
            )),
        onTap: () {
          Navigator.pushNamed(context, destinationScreen);
        });
  }
...