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

Flutter align IconButton to the right in Row

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;

https://imgur.com/a/5oLTr0u

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

2

Answers


  1. 0

    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,
            ),
            
          ],
    Login or Signup to reply.
  2. 0

    Just wrap the IconButton inside the Expanded, and

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

    Output:

    enter image description here

    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,
              ),
            ),
          ],
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search