如何在flutter中将图像设置为从上到下一半在外面

Question

我正在尝试创建这个设计

但图像并不完全在应有的位置。

这是我的代码

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

我的代码输出

Answer 1

尝试下面的代码：

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(
                                                    //on pressed
                                                    onPressed: () async {},
                                                    //text to shoe in to the button
                                                    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,
                                        ),
                                      )
                                    ],
                                  ),
                                ),

结果：