flutterrowiconbutton

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

Solution

  • 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,
                ),
                
              ],