Aligning Two Seperate text in left and making a iconbutton in full right centering tthe two text Flutter

IndraSekar
January 28, 2023
167 views
0 votes
2 Answers

I have two seperate text in an container and I need a icon to come right to this text and need to be center aligned to both this text. I dont know how to make this happen. Am sorry If this question is already asked but I can’t that question. Help me to understand how that works.

You can see in the buttom i have both price text and an cart icon centered to them in right. How can I achieve this please help me.

I will share the code for the rest . If you can make the code better that will help too…

Container(
            width: 430,
            height: 350,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              border: Border.all(color: Colors.black45),
            ),
            child: Column(
              children: [
                const SizedBox(height: 40),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          SizedBox(width: 20),
                          Text("Blue Star 1.5 ton 5 star inverter AC",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500
                          ),)
                        ],
                      ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                    children: const [
                      SizedBox(width: 20),
                      Text("Blue Star",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.normal
                      ),
                    ),
                  ]),
                Image.asset("assets/air_conditioner.png",
                  height:180,
                width: 340,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const SizedBox(width: 30,),
                    const Text("₹54,000 (10% OFF)",
                    style: TextStyle(
                      color: Colors.redAccent,
                      fontSize: 17,
                      fontWeight: FontWeight.w500
                    ),),
                    IconButton(
                        onPressed: (){},
                        icon: const Icon(Icons.shopping_cart))
                  ],
                ),
                const SizedBox(height: 05),
                Row(
                  children: [
                    const SizedBox(width: 35),
                    const Text("₹60,000",
                      style: TextStyle(
                        decoration: TextDecoration.lineThrough,
                        fontSize: 14
                      )),
                  ],
                )
            ],
                )
            ),

Answers

Container(
            width: 430,
            height: 350,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              border: Border.all(color: Colors.black45),
            ),
            child: Column(
              children: [
                const SizedBox(height: 40),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          SizedBox(width: 20),
                          Text("Blue Star 1.5 ton 5 star inverter AC",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500
                          ),)
                        ],
                      ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                    children: const [
                      SizedBox(width: 20),
                      Text("Blue Star",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.normal
                      ),
                    ),
                  ]),
                Image.asset("assets/air_conditioner.png",
                  height:180,
                width: 340,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const SizedBox(width: 30,),
                    const Text("₹54,000 (10% OFF)",
                    style: TextStyle(
                      color: Colors.redAccent,
                      fontSize: 17,
                      fontWeight: FontWeight.w500
                    ),),
                    IconButton(
                        onPressed: (){},
                        icon: const Icon(Icons.shopping_cart))
                  ],
                ),
                const SizedBox(height: 05),
                Row(
                  children: [
                    const SizedBox(width: 35),
                    const Text("₹60,000",
                      style: TextStyle(
                        decoration: TextDecoration.lineThrough,
                        fontSize: 14
                      )),
                      IconButton(
                        onPressed: (){},
                        icon: const Icon(Icons.shopping_cart))
                  ],
                ),
            ]),
            ),

I’ve edited your code:

Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              border: Border.all(color: Colors.black45),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Text("Blue Star 1.5 ton 5 star inverter AC",
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500
                    ),),
                  const SizedBox(height: 10,),
                  const Text("Blue Star",
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.normal
                    ),
                  ),
                  const SizedBox(height: 10,),
                  Center(
                    child: Image.asset("assets/air_conditioner.png",
                      height:180,
                      width: 340,),
                  ),
                  const SizedBox(height: 10,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const [
                          Text("₹54,000 (10% OFF)",
                            style: TextStyle(
                                color: Colors.redAccent,
                                fontSize: 17,
                                fontWeight: FontWeight.w500
                            ),),
                          Text("₹60,000",
                              style: TextStyle(
                                  decoration: TextDecoration.lineThrough,
                                  fontSize: 14
                              )),
                        ],
                      ),
                      IconButton(
                          onPressed: (){},
                          icon: const Icon(Icons.shopping_cart))
                    ],
                  ),

                ],
              ),
            )
        )

some notes:

try to use padding instead of SizedBox for setting padding sides. because SizedBox is using for setting spaces between something …
crossAxisAlignment default is center if you want to make it start you should use CrossAxisAlignment.start
do not use static sizes for Container if it is not force let it fill itself
mainAxisSize default is max but here you should use MainAxisSize.min to let it use its real size of the widget.
if you had any questions i’m here.
happy coding…

Please signup or login to give your own answer.

Click here to cancel reply.