skip to Main Content

I want spacing between text and image but here row spaceBetween is not working,
and when I am using expanded then i am getting error. how to resolve this.

This is my code.

AspectRatio(
              aspectRatio: 16 / 4.5,
              child: ListView.separated(
                  physics: BouncingScrollPhysics(),
                  separatorBuilder: (context, index) => Divider(
                        indent: 12,
                      ),
                  scrollDirection: Axis.horizontal,
                  itemCount: myPizza.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: EdgeInsets.only(
                          left: index == 0 ? 20 : 0,
                          right: index == myPizza.length - 1 ? 20 : 0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child:Container(
      padding: EdgeInsets.only(top: 9, left: 9, right: 9, bottom: 9),
      decoration: BoxDecoration(
        color: MyColor.blueColor.withOpacity(0.06),
      ),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Crinkle Fries",
                    style: textStyleWith12500(MyColor.blackColor),
                  ),
                  Text(
                    "₹ 99",
                    style: textStyleWith10500(MyColor.greenColor),
                  ),
                ],
              ),
              Stack(
                fit: StackFit.passthrough,
                children: [
                  Container(
                    height: 46,
                    width: 46,
                    decoration: BoxDecoration(
                      color: MyColor.whiteColor,
                      borderRadius: BorderRadius.circular(4),
                      boxShadow: [
                        BoxShadow(
                          color: MyColor.greyColor.withOpacity(0.35),
                          blurRadius: 3.0,
                        ),
                      ],
                    ),
                    child: Container(
                      height: 46,
                      width: 46,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          image: DecorationImage(
                            image: AssetImage('assets/BannerImages/card1.png'),
                            fit: BoxFit.fill,
                          )),
                    ),
                  ),
                  Positioned(
                      top: 5,
                      right: 5,
                      child: Image.asset(
                        "assets/verification_icon.png",
                        height: 9,
                        width: 8.5,
                      ))
                ],
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            height: 24,
            width: 147,
            child: ButtonWithTextStyle(
              onPressed: () {},
              btnColor: MyColor.primaryRedColor,
              btnText: "ADD",
              btnTextStyle: textStyleWith10500(MyColor.whiteColor),
              radius: 4.0,
            ),
          )
        ],
      ),
    ),
                      ),
                    );
                  }),
            ),

This is my ui
enter image description here

But In actuall I want like this
enter image description here

2

Answers


  1. Check my code, i have used Spacer widget between text and image

    You can use Spacer widget to achieve your functionality 🙂 Nice.

     AspectRatio(
                      aspectRatio: 16 / 4.5,
                      child: ListView.separated(
                          physics: BouncingScrollPhysics(),
                          separatorBuilder: (context, index) => Divider(
                                indent: 12,
                              ),
                          scrollDirection: Axis.horizontal,
                          itemCount: myPizza.length,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: EdgeInsets.only(
                                  left: index == 0 ? 20 : 0,
                                  right: index == myPizza.length - 1 ? 20 : 0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(8),
                                child:Container(
              padding: EdgeInsets.only(top: 9, left: 9, right: 9, bottom: 9),
              decoration: BoxDecoration(
                color: MyColor.blueColor.withOpacity(0.06),
              ),
              child: Column(crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
        
                children: [
                  Row(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Crinkle Fries",
                            style: textStyleWith12500(MyColor.blackColor),
                          ),
                          Text(
                            "₹ 99",
                            style: textStyleWith10500(MyColor.greenColor),
                          ),
                        ],
                      ),
                      Spacer(), //try using Spacer 
                      Stack(
                        fit: StackFit.passthrough,
                        children: [
                          Container(
                            height: 46,
                            width: 46,
                            decoration: BoxDecoration(
                              color: MyColor.whiteColor,
                              borderRadius: BorderRadius.circular(4),
                              boxShadow: [
                                BoxShadow(
                                  color: MyColor.greyColor.withOpacity(0.35),
                                  blurRadius: 3.0,
                                ),
                              ],
                            ),
                            child: Container(
                              height: 46,
                              width: 46,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(4),
                                  image: DecorationImage(
                                    image: AssetImage('assets/BannerImages/card1.png'),
                                    fit: BoxFit.fill,
                                  )),
                            ),
                          ),
                          Positioned(
                              top: 5,
                              right: 5,
                              child: Image.asset(
                                "assets/verification_icon.png",
                                height: 9,
                                width: 8.5,
                              ))
                        ],
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Container(
                    height: 24,
                    width: 147,
                    child: ButtonWithTextStyle(
                      onPressed: () {},
                      btnColor: MyColor.primaryRedColor,
                      btnText: "ADD",
                      btnTextStyle: textStyleWith10500(MyColor.whiteColor),
                      radius: 4.0,
                    ),
                  )
                ],
              ),
            ),
                              ),
                            );
                          }),
                    ),
    
    Login or Signup to reply.
  2. just wrap your Stack with Padding and assign padding of left:

    Padding(
                                  padding: const EdgeInsets.only(left: 20.0),
                                  child: Stack(
                                    fit: StackFit.passthrough,
                                    children: [
                                      Container(
                                        height: 46,
                                        width: 46,
                                        decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius: BorderRadius.circular(4),
                                          boxShadow: [
                                            const BoxShadow(
                                              blurRadius: 3.0,
                                            ),
                                          ],
                                        ),
                                        child: Container(
                                          height: 46,
                                          width: 46,
                                          decoration: BoxDecoration(
                                              borderRadius: BorderRadius.circular(4),
                                              image: const DecorationImage(
                                                image: AssetImage(
                                                    'assets/BannerImages/card1.png'),
                                                fit: BoxFit.fill,
                                              )),
                                        ),
                                      ),
                                      Positioned(
                                          top: 5,
                                          right: 5,
                                          child: Image.asset(
                                            "assets/verification_icon.png",
                                            height: 9,
                                            width: 8.5,
                                          ))
                                    ],
                                  ),
                                ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search