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?

Solution

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

Comments

[CoderUni]

I think what you're looking for is CrossAxisAlignment. You have to set it to center. Read the available options here: api.flutter.dev/flutter/rendering/CrossAxisAlignment-class.h‌​tml

[Sermed mayi]

@Uni I used all CrossAxisAlignment values and i get same

[CoderUni]

That means the icon sizes are not the same. Take a look at someone's answer below.

[Nisanth Reddy]

@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.

[Sermed mayi]

Thank you too much ,yes it is solved many thanks