Fix the position of widget in a row-CodePudding

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(),

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

CodePudding user response：

For your Row, add the argument mainAxisAlignment:

mainAxisAlignment: MainAxisAlignment.spaceBetween,

and remove the line:

SizedBox(width:120),

This will make the Text flushed left and the Counter widget flushed right. Other values to use are MainAxisAlignment.spaceEvenly and MainAxisAlignment.spaceAround.

CodePudding user response：

try to use Flexible or Expanded widget in your row

then use Align widget as child