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

#flutter #dart

Вопрос:

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

 SizedBox(
                width: double.infinity,
                height: 400,
                child: Stack(
                  children: [
                    Positioned(
                      left: 0,
                      height: 450,
                      child: Image.asset(
                        'assets/images/face_woman.png',
                      ),
                    ),
                    Positioned(
                      right: -40,
                      top: 0,
                      height: 450,
                      child: Image.asset(
                        'assets/images/face_man.png',
                      ),
                    )
                  ],
                ),
              )
 

Ответ №1:

Оберните свои изображения Opacity виджетом:

 SizedBox(
  width: double.infinity,
  height: 400,
  child: Stack(
    children: [
      Positioned(
        left: 0,
        height: 450,
        child: Opacity(
          opacity: 0.5,
          child: Image.asset(
            'assets/images/face_woman.png',
          ),
        ),
      ),
      Positioned(
        right: -40,
        top: 0,
        height: 450,
        child: Opacity(
          opacity: 0.5,
          child: Image.asset(
            'assets/images/face_man.png',
          ),
        ),
      )
    ],
  ),
);
 

Комментарии:

1. Извините, это была не моя проблема. Я только что отредактировал его. Пожалуйста, взгляните на это. и помоги мне выбраться из этого.

2. @SouravEmon ответ очень похож. Если вы хотите поиграть с непрозрачностью виджета, используйте Opacity виджет.

Ответ №2:

Альтернативный подход:

 AssetImage img = const AssetImage('...');
return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image(
          alignment: Alignment.topCenter,
          image: img,
          width: {width of the image},
          height: {height of the image/2},
          fit: BoxFit.fitWidth,
        ),
        Opacity(
          opacity: 0.3,
          child: Image(
            alignment: Alignment.bottomCenter,
            image: img,
            width: {width of the image},
            height: {height of the image/2},
            fit: BoxFit.fitWidth,
          ),
        ),
      ],
    ),
  ),
);
 

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