Flutter - How to align button to right side of the Row

Question

I have an issue with aligning a add button to right side of the row. I tried using SizedBox, MainAxisAlignment and increasing the width of buttons and containers, but it didn't work.It's moving to the left side instead and decreases the width of TextField.I guess it's because of Flexible class i used to create Row with TextField

Widget buildParty() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          border: Border.all(width: 0.7, color: Colors.black38),
        ),
        child: Row(
          children: [
            Container(
              alignment: Alignment.center,
              width: 30,
              height: 60,
              child: Text('$_prtnum'),
            ),
            Flexible(
              child: TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Participant')
              ),
            ),
            ElevatedButton(onPressed: () {
              setState(() {
                if (_prtadd > 1)
                  --_prtadd;
              });
            }, child: Text('-', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.zero
                ),
                alignment: Alignment.center,
                backgroundColor: Colors.green[700],
                minimumSize: Size(34, 10),
                padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
            ),),
            Container(
              alignment: Alignment.center,
              width: 35,
              child: Text('$_prtadd'),
            ),
            ElevatedButton(onPressed: () {
              setState(() {
                if (_prtadd < 8)
                  ++_prtadd;
              });
            }, child: Text('+', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5.0))
                ),
                alignment: Alignment.center,
                backgroundColor: Colors.green[700],
                minimumSize: Size(34, 10),
                padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
            ),)
          ],
        ),
      ),
    );
  }

Answer 1

You should try using the Align class in flutter to position the widgets.

Container(
     
      child: Align(
        alignment: Alignment.centerRight,
),)

You can also align the button to the bottom and top right aswell but replacing centerRight with bottomRight or topRight.

Another way of doing it is but setting the alignment:

Align(
  alignment: Alignment(0.2, 0.6),

For more clarity go to :

https://api.flutter.dev/flutter/widgets/Align-class.html

Answer 2

You need to use this property in style of the right side button widget :
tapTargetSize: MaterialTapTargetSize.shrinkWrap

 style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(5),
                    bottomRight: Radius.circular(5.0))),
            alignment: Alignment.center,
            backgroundColor: Colors.green[700],
            minimumSize: Size(34, 10),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            padding: EdgeInsets.symmetric(
              vertical: 22,
              horizontal: 0,
            ),
          )

Hope it will help you