Flutter align IconButton to the right in Row

Question

Here is my code;

SizedBox(
        width: size.width,
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.asset(
                  'assets/images/me.png',
                  height: 30,
                  width: 30,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                'samet',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            IconButton(
              // padding: const EdgeInsets.only(left: 250),
              onPressed: () {},
              icon: const Icon(Icons.more_horiz),
              iconSize: 30,
              alignment: Alignment.centerRight,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            )
          ],
        ),
      ),

here is output;

I looked other StackOverflow questions like this and couldn't find the answer. And i can't change my iconButton's color with onPressed function. I created variable of Color _color and made my iconButton attribute color = _color and in onPressed i opened setState function and it won't change when i press.

IconButton(
              // padding: const EdgeInsets.only(left: 250),
              color: _iconColor,
              onPressed: () {
                setState(() {
                  _iconColor = Colors.red;
                });
              },
              icon: const Icon(Icons.more_horiz),
              iconSize: 30,
              alignment: Alignment.centerRight,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            )

Answer 1

How to Right Align IconButton

You can use Expanded to take up extra space in between.

const Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                'samet',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            Expanded(child: Container()),
            IconButton(
              // padding: const EdgeInsets.only(left: 250),
              onPressed: () {},
              icon: const Icon(Icons.more_horiz),
              iconSize: 30,
              alignment: Alignment.centerRight,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            ),
            
          ],

Answer 2

Just wrap the IconButton inside the Expanded, and

to change the color of the IconButton use the color prop of IconButton.

Output:

Code:

 Scaffold(
        body: Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.asset(
                  'assets/images/avatars/boy.png',
                  height: 30,
                  width: 30,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                'samet',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            Expanded(
              child: IconButton(
                // padding: const EdgeInsets.only(left: 250),
                onPressed: () {},
                icon: const Icon(Icons.more_horiz),
                iconSize: 30,
                alignment: Alignment.centerRight,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),