Flutter : Make IconButtons with different Icon sizes and Text elements in Row align to the center

Question

I have this Row widget in Flutter App with some IconButtons

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    IconButton(
      icon: Icon(Icons.skip_previous,
        color: Colors.amber, size: 35),
      onPressed: () {
        setState(() {
          pageIndex = 1;
        });
      }),
    IconButton(
      icon: Icon(Icons.arrow_left,
        color: Colors.amber, size: 45),
      onPressed: decIndex),
    Text('Page $pageIndex',
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.amber,
        fontSize: 20,
        fontWeight: FontWeight.bold)),
    IconButton(
      icon: Icon(Icons.arrow_right,
        color: Colors.amber, size: 45),
      onPressed: () {
        incIndex(pageNumbers);
      }),
    IconButton(
      icon: Icon(Icons.skip_next,
        color: Colors.amber, size: 35),
      onPressed: () {
        setState(() {
          pageIndex = pageNumbers;
        });
      }),
    IconButton(
      icon: Icon(Icons.location_searching,
        color: Colors.amber, size: 35),
      onPressed: () {
        setState(() {
          pageIndex = userPage;
        });
      }),
  ],
),

they display as shown in this image:

the red line is just to be clear the difference between elevations

I want make all items aligned on the same line through their center. How can I do that?

I think what you're looking for is CrossAxisAlignment. You have to set it to center. Read the available options here: https://api.flutter.dev/flutter/rendering/CrossAxisAlignment-class.html — CoderUni, May 17 '21 at 12:41
That means the icon sizes are not the same. Take a look at someone's answer below. — CoderUni, May 17 '21 at 12:44
@Uni The issue here is not with `Axis`. OPs icons are overflowing out of the `IconButton` since the `IconButton` is not adapting to the increased `Icon` size. I posted an answer, check it out. — Nisanth Reddy, May 17 '21 at 12:44

Nisanth Reddy · Accepted Answer · 2021-05-17T12:48:12.660

Using size parameter on the Icon is not a very good approach for IconButton widgets. You icon are becoming big and the IconButtons are not adapting to that expanded size, which is causing the icon to overflow.

Instead, use the iconSize parameter on the IconButton and give the same value you were giving to the Icon and remove it from the Icon.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    IconButton(
      iconSize: 35,
      icon: Icon(Icons.skip_previous, color: Colors.amber),
      onPressed: () {
        setState(() {
          pageIndex = 1;
        });
      }
    ),
    IconButton(
      iconSize: 45,
      icon: Icon(Icons.arrow_left, color: Colors.amber),   
      onPressed: decIndex
    ),
    Text('Page $pageIndex',
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.amber,
        fontSize: 20,
        fontWeight: FontWeight.bold)),
    IconButton(
      iconSize: 45,
      icon: Icon(Icons.arrow_right, color: Colors.amber),
      onPressed: () {
        incIndex(pageNumbers);
      }),
    IconButton(
      iconSize: 35,
      icon: Icon(Icons.skip_next, color: Colors.amber),
      onPressed: () {
        setState(() {
          pageIndex = pageNumbers;
        });
      }),
    IconButton(
      iconSize: 35,
      icon: Icon(Icons.location_searching, color: Colors.amber),
      onPressed: () {
        setState(() {
          pageIndex = userPage;
        });
      }
    )
  ],
),

Thank you too much ,yes it is solved many thanks – Sermed mayi May 17 '21 at 12:47 — Sermed mayi, May 17 '21 at 12:47

Flutter : Make IconButtons with different Icon sizes and Text elements in Row align to the center

1 Answers1