Question 75752 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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

5

Answers


  1. 0

    Wrap Flexible with Expanded, as it’ll acquire the rest of the space

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    @Amil I have updated your code. Please use below code and you are good to go:-

     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,
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            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))
            ),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,

            alignment: Alignment.center,
            backgroundColor: Colors.green[700],
            minimumSize: Size(34, 10),
            padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
        ),)
      ],
    ),
  ),
)
    Login or Signup to reply.
  5. 0

    Try below code and remove horizontal padding from 2nd ElevatedButton

    functions:

      int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

    Widgtes:

       Container(
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(5)),
            border: Border.all(width: 0.7, color: Colors.black38),
          ),
          margin: const EdgeInsets.symmetric(
            horizontal: 15,
          ),
          padding:const EdgeInsets.only(left: 10),
          child: Row(
            children: [
              Text(
                '$_counter',
              ),
              const SizedBox(
                width: 20,
              ),
              const Flexible(
                child: TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'Participant'),
                ),
              ),
              ElevatedButton(
                onPressed: _incrementCounter,
                style: ElevatedButton.styleFrom(
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.zero),
                    alignment: Alignment.center,
                    backgroundColor: Colors.green[700],
                    minimumSize: const Size(34, 10),
                    padding: const EdgeInsets.symmetric(
                        vertical: 22, horizontal: 5)),
                child: const Text(
                  '-',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              Container(
                alignment: Alignment.center,
                width: 35,
                child: Text(
                  '$_counter',
                ),
              ),
              ElevatedButton(
                onPressed: _decrementCounter,
                style: ElevatedButton.styleFrom(
                  shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(5),
                          bottomRight: Radius.circular(5.0))),
                  alignment: Alignment.center,
                  backgroundColor: Colors.green[700],
                  minimumSize: const Size(34, 10),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  padding: const EdgeInsets.symmetric(
                    vertical: 22,

                  ),
                ),
                child: const Text(
                  '+',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ],
          ),
        ),

    Result-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search