Fix the position of widget in a row

user_3938789 0
Viewed 743

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

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

enter image description here

dart flutter
6 Answers

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.

user_33656670

folow these steps:

  1. delete SizedBox(width:120),

  2. Put the text Widget of '- \Tsh. $loyaltyPrice ' inside a SizedBox

  3. make sure that the width of the SizedBox is more than 120 based on that you want the empty space between the buttons and text is 120 and now the width of the SizedBox= the size of the text + 120

                  SizedBox(
                    child: Text(
                      '- \Tsh. $_counter ',
                      style: const TextStyle(color: Colors.red),
                    ),
                    width: 150,
                  ),
user_64623760

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

user_170860320

try to use Flexible or Expanded widget in your row

then use Align widget as child

user_153660300

Wrap your counter in a Container with fixed width, in this way it will have the same space also with different number of digits.

user_154555560

please add this changes to your code .

  • add a fixed Height to your row (Because we want to use expanded in column )
  • wrap your Text widget with Expanded
  • wrap your Counter widget with Expanded
              SizedBox(
               height: 300 <- what you want
               child:Row(
                  children: [
                      Expanded(child:Text()),
                      SizedBox(width:120),
                     Expanded(child:LoyaltyCounterView()),

                  ]),                 
                ))
user_68139070
Related