How to set image half outside from top and bottom in flutter

Question

I'm trying to create this design

but the image is not exactly where it should to be.

here is my code

Stack(
    children: [
      Container(
        width: width * 0.9,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          gradient: const LinearGradient(
            begin: Alignment.centerRight,
            end: Alignment.bottomLeft,
            colors: [
              AppColors.orangeColorLight,
              AppColors.orangeColorDark
            ],
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.only(left: 20, top: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              customText(context),
              const SizedBox(height: 10,),
              getNowBtn()
            ],
          ),
        ),
      ),
      Positioned(
        right: 0, // Adjust this value according to your requirement
        bottom: 0, // Adjust this value according to your requirement
        child: Image.asset(MediaConstants.menImage, width: width * 0.49,height: height*0.2,),
      ),
    ],
  );

my code output

Answer 1

Try below code:

SizedBox(
        height: 220,
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Container(
              height: 200,
              width: double.infinity,
              padding: const EdgeInsets.all(8.0),
              child: Card(
                color: Colors.red,
                child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text('Advanced Salary',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontWeight: FontWeight.bold)),
                      const SizedBox(
                        height: 5,
                      ),
                      const Text('For Any Jobs',
                          style: TextStyle(
                              letterSpacing: 2,
                              color: Colors.white,
                              fontSize: 15,
                              fontWeight: FontWeight.w300)),
                      const SizedBox(
                        height: 6,
                      ),
                      ElevatedButton(
                        onPressed: () async {},
                        child: const Text('Get Now',
                            style: TextStyle(color: Colors.black)),
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.white,
                            fixedSize: Size(150, 20)),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              right: 0,
              top: 0,
              bottom: 0,
              child: Image.network(
                'https://i.ibb.co/7Kr3Vc2/Screenshot-2022-02-23-at-6-11-05-PM-removebg-preview.png',
                fit: BoxFit.cover,
                height: 210,
              ),
            )
          ],
        ),
      )

Result: