Fix the position of widget in a row

Issue

I have two widgets in my row, a text widget and a counter widget. The text widget contains value which increases and decreases when the counter is increased/decreased. Now, when the value increases, it pushes the counter towards the right. How do I prevent this from happening? I want the counter to stay in it's fixed position.

Widget build(BuildContext context) {
     var loyaltyPrice =  Provider.of<Cart>(context, listen: false).loyaltyPrice;
    return  
       Card(
        color:Colors.red[100],
        margin: EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 4,
        ),
        child: Padding(
         padding: const EdgeInsets.all(5),
          child:Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Row(
                  children: [
                      Text('- \Tsh. $loyaltyPrice ',style:TextStyle(color:Colors.red)),
                      SizedBox(width:120),
                     LoyaltyCounterView(),

                  ]),                 
                  ],
                )
              ),         
       );
        
  }
}

Solution

Instead of using sized box between your widget, wrap your text widget with container and set width for that

Row(
  children: [
       Container(width:your width,child:  Text('- \Tsh. $loyaltyPrice                   ',style:TextStyle(color:Colors.red)),)
      LoyaltyCounterView(),

  ]),     

and also another way is using MainAxisAlignment.spaceBetween for your row widget. I recommend using second way for solving your problem

Answered By - mohammad darvishi