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

Advertisements

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
enter image description here

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)
            ),)
          ],
        ),
      ),
    );
  }

>Solution :

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

Leave a Reply Cancel reply