How can I make these image half normal and half transparent in flutter?-CodePudding

I want the top of the image to look perfect (opaque) and the bottom of the image will transparent. how can I do it?

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',
                      ),
                    )
                  ],
                ),
              )

CodePudding user response：

Alternative approach:

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,
          ),
        ),
      ],
    ),
  ),
);

CodePudding user response：

Wrap your images with Opacity widget:

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',
          ),
        ),
      )
    ],
  ),
);