Question 379107 in Flutter Question posted in
The official Flutter documentation can be found here.

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

I’m trying to create this design

desired output

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

code output

Tags:

2

Answers


  1. 0

    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: enter image description here

    Login or Signup to reply.
  2. 0

    the image height should not be limited to the container
    to do that you should put the entire stack widget in a sized box and give it a height slightly bigger than that of the container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search